Hi folks, I'm Mick the WordPress mentor and I'm helping web builders do it myself WordPress with Elementor. If you've ever checked out Elementor's blog pages yourself on your mobile, then you have seen that you can scroll the menu with your finger from left to right. It's really easy to make this, and I'm going to show you this today. Before I start, I would like to ask you to subscribe to my channel and to it bell for notifications when I add a new video. In this example I want a menu for it for my categories, which is only visible in the blog section of my site.
On mobile, I want to have the sliding version there, instead of a traditional one hamburger menu. Before I dive into that, I first want to tell you what I've done so far. I have adjusted the Display Conditions on my current Header so that it is only shown on the selected pages, and I also created a new menu in WordPress just for the blog categories, and finally I created a new header template with a second menu bar, showing the custom menu for the blog categories, and have the display conditions set to show the menu only on the blog pages. Let's start: Open the header template you will be working on today and click on the navigation element. Check under the Content tab that the layout is horizontal, and under Mobile Dropdown set the Breakpoint to "None".
Now we have to add another CSS class to the menu. Go to the Advanced tab, and add a unique class name. For this tutorial I use the name "mickmenu". But you can decide for yourself which class name you give. Now we have to add some CSS, and the correct way to do that is to add it add to the child theme or a snippets plugin, but for this tutorial we are going to add it to Elementor's global CSS.
Make sure you have the latest version of Elementor Pro, and that you are still in the header template with your new menu. Click on it hamburger menu at the top left of the Elementor Editor, and click Theme Style. Click on the Custom CSS toggle, and paste the CSS code found in the blog post to this video here. The link is in the description below this video. Make sure to add the CSS class you want to your menu widget added so that the correct menu is addressed.
Now click on Update. The CSS contains a media query so that it only works on mobile devices. Let's take a look at the mobile view to make sure it works. You should be able to use your mouse to navigate the menu to slide. So that was super easy! Don't forget the link in the description below for the blog post where the code is available for the today's video.
Good day! I am Mick. .
Get the code here –
NOTE: This video method requires Elementor Pro.
► PLUGIN REFERENCED IN THIS VIDEO ◄
★ Get Elementor –
► MY RECOMMENDATIONS ◄
If you like what I do and would like to support me, please consider using these links when purchasing my recommendations.
★ ELEMENTOR PRO:
★ Happy Addons –
★ Get Dynamic OOO –
★ Front End Forms –
► SUBSCRIBE ◄
► LET'S GET SOCIAL: ◄
Please check out my website!