Horizontal Click-to-Scroll Menu

Setup our main container

  1. Place within a single column section:
    1. (1) Icon element
    2. (1) Nav Menu element
    3. (1) Icon element
  2. Set the section’s Min-Height to 100px and it’s column position to middle.
  3. Set the section’s inner column Vertical Align to Middle and it’s Horizontal Align to Center. 

Style our Icon buttons

  1. For the Previous button:
    1. Choose the Left facing chevron icon
    2. Give it a link #prev
    3. Give it a unique class of ‘prev-button’
  2. For the Next button:
    1. Choose the Right facing chevron icon
    2. Give it a link #next
    3. Give it a unique class of ‘next-button’
  3. For both icons:
    1. Set the size to 20px
    2. Set the Positioning to Width to Custom and set the value to 50px
    3. Style the color, background and borders as desired
    4. Paste the following custom css for both icons:
1
2
3
4
5
6
7
8
9
selector {
    max-width: 50px;
}
selector .elementor-icon-wrapper {
    align-items: center;
    display: flex;
    height: 48px;
    justify-content: center;
}

Style our Nav Menu

  1. Set the menu’s pointer to none
  2. Set the submenu indicator to none
  3. Set the breakpoint to none
  4. Give the menu a unique class of ‘main-nav-menu’
  5. Set the menu’s positioning to custom but don’t set a value
  6. Paste the following custom css (update colors as needed):
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
selector {
    max-width: 340px !important;
    max-height: 50px;
    overflow: hidden;
}
selector ul.elementor-nav-menu {
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
    flex-wrap: nowrap;
}
selector ul.elementor-nav-menu li > a {
    background-color: #FFFFFF36;
    border-right: 1px solid #fff !important;
    height: 48px;
}
selector ul.elementor-nav-menu li:last-child > a {
    border-right: none !important;
}
@media(max-width: 480px){
    selector {
        max-width: 200px !important;
    }
}

Define the Javascript needed to scroll the menu

  1. Insert an HTML element at the bottom of the document
  2. Paste the following script:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<script>
(function($){
    $('.next-button').click(function(e){
        e.preventDefault();
        $('.main-nav-menu').animate({
            scrollLeft: "+=100px"
        });
    });
    $('.prev-button').click(function(e){
        e.preventDefault();
        $('.main-nav-menu').animate({
            scrollLeft: "-=100px"
        });
    });
})(jQuery);
</script>