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.
10 Responses
can you provide an example json template for us to use?
Greetings Taqy!
I added the option to copy paste the template!
Cheers!
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?
Greetings Petrus,
Do you have all the proper features enabled under WP > Elementor > Settings > Features ? And are you on another browser than Safari?
Cheers!
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...
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?
I think it's too resource-heavy, so it times out before it can be completed. We have 2 GB mem and the default recommended max vars settings for our site.
I tried it on a friend's site, and it's working there when I copy and paste it:
https://prnt.sc/ijUDyWjYp0Sv
But then when I save and refresh it says, no taxonomies found:
https://prnt.sc/nnTAdfjvYPKr
What am I doing wrong?
Did you set up your own Query in the Loop Grid element? You need to set it to query your Posts, or your CPT.
No, I was trying to get your example working first. So copy and paste will not import yours? I need to create some?
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.