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