Contents
Under Basic settings, add the navigation bar you want to be your sticky menu.
- Change any desired settings, like the space between the top of the page and the sticky element.
- Click Save Settings.
- Refresh your website to see your sticky menu.
Steps to make bootstrap nav fixed top after scroll
- Create navbar on top of page.
- Now check if window scrolled window.
- Check if scrolled more than x amount of px if (window.
- Select navbar element and add function classList.add(‘fixed-top’); to fix on top.
- Remove class fixed-top when page scrolled back to top.
How do you make a sticky menu in CSS?
position: sticky # The position: sticky property tells the browser to let an element scroll with the rest of the document until it reaches to the top of the page. Once it does, it should stick there, and let the rest of the elements on the page scroll behind it.
How to make a sticky menu in WordPress?
Right click on the blank space BEHIND your menu and Inspect Element. The whole bar will highlight when you have found the correct element. In your theme’s custom CSS, add a new class or id hook for the header you found and set the position to fixed with width 100% and top 0px.
By default, myStickymenu should make your menu sticky without any adjustments on your end – which means your menu should become sticky right out of the box. Sticky menu is designed to use element class “.navbar” as “Sticky Class”. That value should be modified in plugin settings for different themes to make it work.
Also, WordPress theme designers pay close attention to how they design the header and main menu in their theme. In making certain design decisions, they might not take into account that the header/menu will be sticky. Because of this, you could be negatively impacting the user experience by forcing the menu to stick.
How can I Make my navigation menu sticky?
First you need to enter the CSS ID of the navigation menu that you want to make sticky. You will need to use your browser’s inspect tool to find the CSS ID used by your navigation menu. Simply visit your website and take your mouse to the navigation menu. After that, you need to right click and select Inspect from your browser’s menu.