Have you noticed that many popular websites are now using sticky navigation menu. Normally, navigation menus are displayed on top and disappear as users scroll down. Sticky navigation menus float as users scroll down and are always visible on screen. In this article, we will show you how to easily create a sticky floating navigation menu in WordPress.
Method 1: Add Sticky Floating Navigation Menu Using Plugin
This method is easier and is recommended for all users. If you haven’t setup the navigation menus yet, then please see our guide on how to add a navigation menu in WordPress.
First thing you need to do is install and activate the Sticky Menu (or Anything!) on Scroll plugin. For more details, see our step by step guide on how to install a WordPress plugin.
Upon activation, you need to visit Settings » Sticky Menu (or Anything!) page to configure plugin settings.
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.
This will split your browser screen, and you will be able to see the source code for your navigation menu. You need to find a line of code like this:
<nav id="site-navigation" class="main-navigation" role="navigation">
In this example, our navigation menu’s CSS ID is site-navigation.
Go ahead and enter the navigation CSS ID in the plugin settings like this #site-navigation.
The next option on the plugin’s settings page is to define the space between the top of your screen and the sticky navigation menu. You can use this setting if your menu is overlapping an element that you do not want to be hidden. If not, then ignore this setting.
After that you need to click the checkbox next to the option: ‘Check for Admin Bar’. This allows the plugin to add some space for the WordPress admin bar which is only added for logged in users.
The next option in the settings page allows you unstick the navigation menu if a user is visiting your website using a smaller screen such as a mobile device.
You can test how it looks on mobile devices or tablets. If you don’t like it, then you can add 780px for this option.
Don’t forget to click on the save settings button to store your changes.
You can now visit your website to see your sticky floating navigation menu in action.
Method 2: Manually Add Sticky Floating Navigation Menu
This method requires you to add custom CSS code to your theme. If you haven’t done this before, then please see our guide on how to easily add custom css to your WordPress site.
First you need to visit Appearance » Customize to launch theme customizer.
Click on ‘Additional CSS’ in the left pane and then add this CSS code.
#site-navigation {
background:#fff;
height:60px;
z-index:170;
margin:0 auto;
border-bottom:1px solid #dadada;
width:100%;
position:fixed;
top:0;
left:0;
right:0;
text-align: center;
}
Replace #site-navigation with the CSS ID of your navigation menu and click on the Save & Publish button.
You can now visit your website to see your sticky floating navigation menu in action.
If your navigation menu normally appears after the site header, then this CSS code could overlap the site title and header.
This can be easily adjusted by adding a margin to your header area using some CSS like this:
.site-branding {
margin-top:60px;
}
Replace site-branding with the CSS class of your header area.
We hope this article helped you add sticky floating navigation menu to your WordPress site. You may also want to see our list of 15 best tutorials to master WordPress navigation menus.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Many thanks for your help – just a small q; the background of my menu is transparent when scrolling down. Any quick fixes of tricks to add a solid colour behind it (white in our case)?
It would depend on how your menu is set up but you can use inspect element to find the object that you can set the background-color property to: https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
Thank You. When Wpbeginner writes a blog post on a topic, it is bound to be helpful.
Glad our content has been helpful
Thanks so much.
You made my day.
You’re welcome, glad we could help
The CSS code worked and I did have to add a margin to the header so the whole title would display. My menu bar stretches across the top but the menu buttons start at the left and stop in the middle. How do I move the buttons to be centered on the page?
That would vary from theme to theme the specifics, but you would normally need to modify the CSS. You can test changes using inspect element: https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
Wow, This works perfectly.
Thank you
Glad our solution worked for you
I have a list of books in a table. I have imported the images of their front covers into Media, now I want to have the images pop up as a viewer scrolls down the list. Similar to a row hover, but how do I do this in a table created in table maker?
How can i make this fixed navigation menu scrollable?
So i used it for a sidebar but when the sidebar it is too long it doesn’t fit on the screen and i cant scroll it down.
Hello,
How did you write the code LIKE A CODE in this post? I mean how to show HTML codes like this in a post?
Thanks.
Great post! your CSS code works for me
Very usefull !
thank you.
Also you can “z-index: 999xxxx” for logo or any element that you want put it on navbar
I want to know how to add a sticky menu inside a WordPress post or page. Like for a long post, the headings and sub-headings of the post itself to be presented in the sticky menu so that a reader can easily navigate from one section in the post to another. Thanks…
thanks for the tutorial!
what i need is a little different, i need a ‘mini-menu’ to appear when you hover on the menu … so it doesn’t show until you hover .. like a drop down
if you could make this tutorial i would appreciate it.
you can use a mega-menu plugin or uber menu plugin, but you can make it without plugin, by css or jquery, like bootstrap3 menu