Get Premium

Elementor Horizontal Scroll Menu, Taxonomy, Tabs With Extra Features

Element.How also offers premium tutorials! Check them here:

Table of Contents

In this tutorial, you are going to learn how to make the Elementor Nav Menu, Tabs Titles and Taxonomy Filter scroll horizontally, along with a few extra features.

This tutorial represents the fully featured, premium version of a few other tutorials I have available for free.

Here is an example of the horizontally scrollable Elementor nav menu, taxonomy filter and tabs titles we are going to create:

Copy Template
Download Template

Please purchase access and be logged in to access this template.

 

For a better preview, visit the demo page from your mobile*.

*Everything works on desktop also, if for example you have enough menu or filter items to require horizontal scrolling.

Features:

  • Polyvalent: Works for the WordPress Menu, the new Menu, the Taxonomy Filter and Tabs elements
  • Arrow Control: Left and right arrows to scroll (accessible)
  • Reactive Arrows: Arrows become unclickable and lower opacity if you can't scroll in that direction
  • Conditional Arrow Display: The arrows only show if horizontal scrolling is possible
  • Conditional Gradients: Left and right gradients in the directions where scroll is possible
  • Image Design: Optional circle image design, with active styling and transition
  • Great UX: Automatically scrolls to the center of the clicked item
  • PageLoad Smart: Automatically scrolls to the center of the current menu item (if one of them is the current page), current taxonomy filter, or current tab
  • New! Auto Same Page Anchor Centering: Same page anchor links will automatically scroll to the active, currently in view menu item (see demo below)
  • Open Tab From URL: Scroll to and open the proper tab on page load through an ID in the URL (site.com/#example-id)
  • Auto Scroll Back Up: On Tab Switch, automatically scroll back up to the top of the tabs element. Useful if your tabs titles are sticky
  • Templates Provided: Get a jump start to get things done quickly

Note that all features are optional, and can be disabled individually. For example, the images, arrows and gradients can be removed.

Here is another example, with the WordPress Nav Menu element (at the top) and the new Menu element (bottom) in a sticky container, along with same page anchors:

Copy Template
Download Template

Please purchase access and be logged in to access this template.

 

Visit that demo page directly.

Note that the menu items here could have images too, but I opted for a different styling for this demo.

First, let's get the element ready for Horizontal Scroll

This is a premium tutorial. Purchase access to unlock the full tutorial.

Access tutorial

$29/one time Purchase access

Includes

  • Gain Access to This TutorialUnlock complete access to the current tutorial: Elementor Horizontal Scroll Menu, Taxonomy, Tabs With Extra Features
  • Future UpdatesYou will get access to all future updates to this tutorial.
  • Enjoy Unlimited UsageUse on as many of your own sites or your clients sites as you wish.

    Note that reselling or redistributing is not permitted.

Access everything

$299/one time Purchase All Access

Includes

  • Unlock every premium tutorial on Element.howGet access to the entire library of premium tutorials on Element.how
    Preview premium tutorials
  • Get access to the CSS course for Elementor usersAccess the complete 14 HTML chapters, 30 CSS chapters and 7 Elementor Projects.Learn more
  • Simple CSS Grid For ElementorAn Elementor Addon to Create Awesome Grid Layouts in a Single Click for Containers, Galleries and Loop Grid. Learn more
  • free extra: ShapeDividers.com Premium AccessLifetime Premium Access to ShapeDividers.comVisit ShapeDividers.com
  • 6 months money backNo questions asked money back. Not what you expected? Get a refund.
  • One-time payment of only $299No hidden fees or subscriptions.

    Sales taxes added where applicable.
  • Support not needed!Due to personal circumstances, I no longer offer support. The vast majority of customers never needed support to start with, so chances are you will be just fine, the tutorials and templates provided are complete.

    I also extended the refund window from 1 to 6 months, during which you can get a full refund for any reason.
  • Lifetime access to everything Element.howThe price reflects what is currently available on Element.how. All future updates are included, but none are promised. You pay for what is available now, and the rest is a sweet extra.
* All prices are USD. Applicable taxes will be charged at checkout. Have a question? See the FAQ or email me.

Element.how also provides premium tutorials showing awesome advanced designs, check them out here.

Looking for something else? Search across 2927 Elements right here:

And get exclusive Elementor related discounts here

Checkout the Elementor Addon Finder directly

22 Responses

  2. Try as I might, I cannot get the paste template to work, even though I've been able to do so with others. I also do not get the loop grid and taxonomy to filter part right. Can you please send me an exported json to import?

    1. Greetings Petrus,

      Do you have all the proper features enabled under WP > Elementor > Settings > Features ? And are you on another browser than Safari?

      Cheers!

      1. Yes, all are enabled, but copying and pasting fails every time. I've done it with some of your other tutorials, but this one fails every single time. Elementor is up to date, and I've even copied and pasted your tutorial that is similar to pictures (call to action). I spent the entire day trying to make it work but it kept failing...

      2. Okay sorry about this. It's working fine for me...

        If you paste it anywhere else (like in notepad), does it look like what it should be? Or do you have some error message?

    1. Greetings!

      Yes. It does not import all of my CPTs and their data (frankly, that's a very good thing!). So you need to setup your Loop Grid to query your own data that you have on your site.

  5. Love this tutorial, could you please provide CSS for WordPress Nav Menu in Sticky Container like your mentioned example above? This is the way I would love to display it.

    Kind regards!

    1. Hey Luca!

      Certainly, here it is:

      /* Adjust the values below to fit your needs */
.horizontalNav {
    --padding-nav-menu: 0 30px;
    --nav-alignement-if-no-scroll-is-possible: center; /* either center or flex-start , works on front end only */
    --menu-item-width-mobile: calc(25vw - 10px);
    --menu-item-width-tablet: calc(19vw - 10px);
    --menu-item-width-desktop: 110px;
    --menu-item-spacing: 0 10px;
    --menu-item-background-color: #333;
    --menu-item-text-color: #fff;
    --menu-item-font-weight: 700;
    --menu-item-font-size: 0.875rem;
    --menu-item-line-height: 1.2;
    --menu-item-padding: 8px 18px;
    --menu-item-border-radius: 99px;
    --menu-item-text-wrap: wrap; /* change to nowrap if you don't want the text to wrap on a new line */
    --menu-item-image-display: none; /* change to none if you don't want the image to show */
    --menu-item-image-margin-bottom: 9px;
    --menu-item-image-height: 57px;
    --menu-item-image-width: 57px;
    --menu-item-image-opacity: 0.9;
    --menu-item-image-border-radius: 50%;
    --menu-item-image-border-inner-width: 3px;
    --menu-item-image-border-inner-color: #fff;
    --menu-item-image-border-outer-width: 3px;
    --menu-item-image-border-outer-color: #777;
    --hover-menu-item-background-color: #777;
    --hover-menu-item-text-color: #fff;
    --hover-menu-item-image-border-inner-color: #fff;
    --hover-menu-item-image-border-outer-color: #333;
    --active-menu-item-background-color: #777777;
    --active-menu-item-text-color: #fff;
    --active-menu-item-image-border-inner-color: #fff;
    --active-menu-item-image-border-outer-color: #333;
    --svg-arrow-width: 30px;
    --svg-arrow-height: 30px;
    --svg-arrow-fill: #999;
    --svg-arrow-inactive-opacity: 0.4;
    --svg-arrow-display: grid; /* change to none if you don't want the arrows to show */
    --gradient-width: 60px;
    --gradient-color: #ffffff;
    --gradient-display: none; /* change to block if you want the gradient to show */
}

      Cheers!

  6. Hey Maxime, just purchased the tutorial. I'm trying to get this to work with the new Elementor "Menu" Widget. Since I'm using this kind of menu on different pages and need to adjust it per page, i wanted a solution that I can modify right there.

    Setting the menu to look good and scroll horizontally is easy with the styling options given with the new elementor (mega-) menu. However, it is the automatic scroll-to-active-item that I cannot get to work.

    Any helpers on this?

    1. Greetings Manuel!

      I just updated the tutorial for full support for the new Menu element. Import the templates fresh, it should all be there!

      Cheers!

  7. Hi Maxime,

    this is great!

    But on the tabs element (mobile), when the --tab-heading becomes sticky, both the arrows and the gradient don't. So they scroll away while the tabs remain sticky.

    Kind regards

    1. Greetings Joao!

      I just had a good look at this, and the HTML structure just doesn't make it possible to have the tab heading sticky, along with the arrows and gradients.

      So these features are mutually exclusive: if you want the tabs heading to be sticky, you will need to remove the arrows and gradients. Else have everything show, but the tab heading can't be sticky.

      Really sorry about this!

  9. Hi Maxime,

    First of all, thank you very much for your scripts. They are a real enrichment and relief for web development.

    Unfortunately I have a small problem with your script “Elementor Horizontal Scroll Menu, Taxonomy, Tabs With Extra Features”.

    You can see the website I am currently developing here:
    https://www.srv1.cyou/limu

    In your custom CSS I have added the following lines above to customize the design:

    /* MENU TABS */
    .e-n-tabs-heading {
    display: flex;
    justify-content: flex-end;
    min-width: calc(100% + 20px);
    margin-left: -10px;
    margin-top: -10px;
    }

    /* ARROWS */
    button.scrl-button.scrollable-navigation.scrollable-navigation-left {
    border: 1px solid #fff !important;
    background-color: #2065DF !important;
    margin-right: 40px !important;
    margin-left: -10px !important;
    margin-top: -10px !important;
    border-radius: 0 !important;
    min-width: 40px !important;
    }

    button.scrl-button.scrollable-navigation.scrollable-navigation-right {
    border: 1px solid #fff !important;
    background-color: #2065DF !important;
    margin-right: -10px !important;
    margin-top: -10px !important;
    border-radius: 0 !important;
    min-width: 40px !important;
    }

    But now I have the problem that on the desktop view I have less space on the left of the first image and on the last image on the right side space has disappeared due to my customization.

    Furthermore, I now also have the problem that in the mobile view, apart from the above-mentioned problem, the images are no longer displayed centered. When I tap on the right arrow, the image ends up on the far left and only when I tap directly on the image it will be centered. In the mobile landscape view, nothing is centered at all.

    Can you please help me with this?

    Thank you very much in advance

    Best regards

    1. Greetings Stephen,

      To fix this, go under WP > Elementor > Settings > Features, and set the Optimized Markup experiment to Inactive.

      Cheers!

Leave a Reply