Elementor Horizontal Scroll Menu, Taxonomy, Tabs With Extra Features
Get Premium

Elementor Horizontal Scroll Menu, Taxonomy, Tabs With Extra Features

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

Elementor Horizontal Scroll Menu, Taxonomy, Tabs With Extra Features

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.

Elementor Horizontal Scroll Menu, Taxonomy, Tabs With Extra Features

Access tutorial

$29/one time Purchase access

Includes

  • Gain Access to This TutorialUnlock complete access to the current tutorial:
  • 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
  • 30 day 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.
  • Great supportGet help when you need it. Support includes getting things working as intended.

    Support excludes customization work.
  • 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.

    I will say that it is definitely my intention to keep adding tutorials to Element.how.
* 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 2737 Elements right here:

And get exclusive Elementor related discounts here

Checkout the Elementor Addon Finder directly

15 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!

Leave a Reply

Elementor Horizontal Scroll Menu, Taxonomy, Tabs With Extra Features

Resources

Premium

Account

Discounts

Facebook Youtube Envelope

© Copyright 2024 Element How
Privacy Policy | Terms & Conditions