Elementor Horizontal Scroll Menu, Taxonomy, Tabs With Extra Features

Elementor Horizontal Scroll Menu, Taxonomy, Tabs With Extra Features

Just Released: 10 Popular Web Hosts Tested In Depth

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:

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, 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
  • Open Tab: 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

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

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$239/one timeUse code:
friday_discount
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.
  • Black Friday discount!BFCM discount:

    get 20% off the All Access with coupon code friday_discount

* 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 2701 Elements right here:

Checkout the Elementor Addon Finder directly

10 Responses

  1. 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.

Leave a Reply