Beginner's Guide for WordPress / Start your WordPress Blog in minutes

How to Create a Sticky Floating Navigation Menu in WordPress

Do you want to create a sticky floating navigation menu in WordPress?

The top navigation menu has links to the most important sections of your website. By making this menu sticky, it will stay on the screen as the user scrolls down the page so it’s always within easy reach.

In this article, we’ll show you how to easily add a sticky floating navigation menu to your WordPress website.

Creating a sticky floating navigation menu in WordPress

What is a Sticky Floating Navigation Menu?

A sticky or floating navigation menu is one that ‘sticks’ to the top of the screen as a user scrolls down. This means the menu is onscreen at all times.

A sticky navigation menu in action on our demo website

Usually, the top navigation menu in WordPress contains links to your website’s most important sections. By making this menu sticky, visitors can click on those links at any time, without having to scroll.

This is a good user experience, which can help increase pageviews and decrease bounce rate in WordPress.

If you run an online store, then the top navigation menu likely has links to the customer cart, product categories, and product search. By making the top menu sticky, you can often reduce cart abandonment rates and get more sales.

Some of the best WordPress themes have built-in support for sticky navigation menus. With that being said, it’s worth checking your theme settings by going to Themes » Customize in the WordPress dashboard and looking for any settings labelled ‘Menus.’

If you’re not sure whether your theme supports sticky menus, then you can check the theme’s documentation or even contact the developer for help. For more information, please see our guide on how to properly ask for WordPress support and get it.

If your theme doesn’t have built-in support for sticky menus, then let’s see how you can easily create a sticky floating navigation menu in any WordPress theme or WooCommerce store. Simply use the quick links below to jump to the method you want to use.

Method 1: Add Your Sticky Floating Navigation Menu Using a Plugin (Recommended)

The easiest way to add a sticky navigation menu in WordPress is by using Sticky Menu (or Anything!) on Scroll. This plugin allows you to make any element sticky, including menus.

First, you’ll need to install and activate the plugin. If you need help, then please see our guide on how to install a WordPress plugin.

Upon activation, go to Settings » Sticky Menu (or Anything!).

The Sticky Menu plugin's settings page

To start, you’ll need to get the CSS ID of the navigation menu that you want to make sticky, by using your browser’s inspect tool.

Simply visit your website and hover your mouse over the navigation menu. After that, just right-click and select ‘Inspect’ from the browser’s menu.

Inspecting the navigation menu element on your website

This will open a new panel inside the browser, where you can see the source code for the navigation menu.

You need to find the line of code that relates to the menu, or your site header. It will look something like this:

<pre class="wp-block-syntaxhighlighter-code">
<nav id="site-navigation" class="main-navigation" role="navigation">
</pre>

If you’re struggling to find the code, then hover your mouse over the different lines of code in the ‘Inspect’ panel. The browser will highlight the navigation menu when you find the right code, as you can see in the following image.

Finding the navigation menu ID using the inspect tool

In this case, the navigation menu’s CSS ID is site-navigation.

Once you have this information, switch back to your WordPress dashboard and add it to the ‘Sticky Element (Required)’ field.

You’ll also need to add a hash character (#) at the start, so site-navigation becomes #site-navigation.

Entering the ID of the element that you want to make sticky (in this case, the navigation menu)

After that, click the ‘Save Changes’ button at the bottom of the page to store your changes.

Now, if you visit your WordPress website and scroll, the menu should stay at the top.

Viewing the sticky menu on your website

Sometimes, the sticky menu may overlap some content that you don’t want to hide.

If this happens, then you’ll need to define a space between the top of your screen and the sticky navigation menu by typing a number into the ‘Space between top of page…’ field.

How to create a sticky navigation menu in WordPress

Sticky menus can cause problems for devices with a smaller screen, such as a mobile device. With that in mind, it’s a good idea to check the mobile version of your WordPress website from desktop.

If you’re not happy with how the menu looks, then you can ‘unstick’ it for mobile users by finding the following field: ‘Do not stick element when screen is smaller than.’

Here, type in ‘780px.’

Unsticking the sticky navigation menu on mobile devices

There are some more settings to explore, but this is all you need to create a working sticky navigation menu.

When you’re happy with how the navigation menu is set up, click on ‘Save Changes’ to store your settings.

Method 2: Manually Add a Sticky Floating Navigation Menu (Without a Plugin)

Another method is to add custom CSS code to your theme. If you make a coding mistake, then this can cause many common WordPress errors, so it isn’t recommended for beginners.

If you haven’t added code to your site before, then take a look at our guide on how to easily add custom CSS to your WordPress site.

First, you need to visit Appearance » Customize to launch the WordPress theme customizer.

Adding custom CSS in WordPress theme

Next, click on ‘Additional CSS’ in the left-hand menu and add the following CSS code:

#site-navigation {
    background:#00000;
    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;
}

This will create a navigation menu with a black background. If you want a different color, then change the hex code next to background. For example, using background: #ffffff will give you a white menu background. If you’re not sure what hex code to use, then you can look at a resource such as HTML color code.

You’ll also need to replace #site-navigation with the CSS ID of your navigation menu. To find this code, simply follow the same process described above.

After adding your code, click on the ‘Publish’ button at the top of the screen. Now, if your visit your WordPress blog or website you’ll see the sticky floating navigation menu in action.

A sticky / floating navigation menu created using CSS

Depending on your theme, sometimes the navigation menu may appear below the site header, instead of above it.

In this case, the sticky navigation menu might appear too close to the site title and header, or even overlap it.

The sticky navigation menu is slightly overlapping the site title

If this happens, then you’ll need to add a margin to the header area using the following CSS:

<pre class="wp-block-syntaxhighlighter-code">
.site-branding {
margin-top:60px !important;
}
</pre>

Just replace site-branding with the CSS class of your header area. To get this information, simply use your browser’s ‘Inspect’ tool and follow the same process described in Method 1.

Now, publish your changes and the navigation menu will no longer overlap the header area.

There's now room for the title below the sticky navigation menu

We hope this article helped you add a sticky floating navigation menu to your WordPress site. You may also want to see our guide on how to increase your blog traffic, and our comparison of the best WordPress page builder plugins.

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.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit – a collection of WordPress related products and resources that every professional should have!

Reader Interactions

42 CommentsLeave a Reply

  1. Great practical tutorail. I did Method 2 and it worked instantly, however when I open the website on mobile, the buttons from the menu have vanished. Anyone knows why or how to solve it?

    Cheers!

    • If you haven’t done so already, we would recommend checking with the support for your specific theme to see if it could be a conflict with your theme’s CSS

      Admin

  2. Hello,
    How do you create a sticky floating menu down the right hand side of a page rather than at the top, so it moves down as you scroll down.
    Thanks!
    Serena

  3. Hello!
    Thanks for your help! It worked like magic :D.
    I learn a little CSS and tried to make my nav sticky from a free theme (GeneratePress) but didn’t work. (I tried “position: sticky;” in CSS), but thank your code that helped me to fix it :)

  4. 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)?

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

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

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

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

  9. :( I wasn’t even able to find that CSS code …. I even searched for “nav id” and there is nothing like that in the code! Any idea why?

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

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

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.