How to Make a WordPress Sticky Floating Navigation Menu


One of our users recently inquired about how to make a sticky navigation menu for their website.

This keeps the top menu visible at all times, which is good for user experience because it contains links to your website’s most important sections. As users scroll down the page, sticky navigation menus stay on the screen.

We’ll show you how to make a sticky floating navigation menu in WordPress in this article.

What is a Floating Sticky Navigation Menu?

When a user scrolls down the page, a sticky or floating navigation menu appears at the top of the screen. This ensures that your menu is always visible to users.

Here’s an example of a sticky menu in action. We’ll show you how to make a menu just like this for your own website:

When and why should sticky menus be used?

The top navigation menu usually contains links to a website’s most important sections. A floating menu keeps those links visible at all times, saving users from having to scroll back to the top. It has also been shown to increase conversion rates.

If you run an online store, you probably have links to the cart, product categories, and product search in your top navigation menu. Making this menu sticky can help you increase sales and reduce cart abandonment.

A sticky navigation menu is built-in to some of the best WordPress themes. To enable this feature, go to Themes » Customize in your theme’s settings.

If your theme doesn’t have this feature, keep reading to learn how to make a sticky floating navigation menu in any WordPress theme or WooCommerce store.

Method 1: Using a Plugin, Create a Sticky Floating Navigation Menu

It is highly recommended for all WordPress users, especially beginners. This is the most straightforward method.

If you haven’t done so already, follow our instructions on how to add a navigation menu in WordPress.

See our step-by-step guide to installing a WordPress plugin for more information. The Sticky Menu (or Anything!) on Scroll plugin must then be installed and activated.

To configure the plugin settings, go to Settings » Sticky Menu (or Anything!) after it’s been activated.

To make a sticky navigation menu, first enter the CSS ID of the menu you want to make sticky.

To find the CSS ID used by your navigation menu, use the inspect tool in your browser.

Following that, right-click and choose Inspect from your browser’s menu. Simply go to your website and click on the navigation menu.

This will split your browser screen, allowing you to see the navigation menu’s source code.

It will resemble the following: You must locate a line of code pertaining to your navigation or site header.

When you have the correct line of code, the navigation menu will be fully highlighted: Bring your mouse cursor over the different lines of code in the Inspect pane if you’re having trouble finding it.

Our navigation menu’s CSS ID is site-navigation in this case.

That’s #site-navigation in this case. All you have to do is add a hash to the beginning of your menu’s CSS ID in the plugin settings.

Remember to save your changes by clicking the ‘Save Changes’ button at the bottom of the page.

Now you can see your sticky menu in action on your WordPress site. As you scroll down the page, it should stay in place, like this:

This setting is only required if your menu overlaps an element that you do not want to be hidden. The space between the top of your screen and the sticky navigation menu is the next option on the plugin’s settings page. If this isn’t the case, disregard this option.

We recommend that you leave the box next to the option ‘Check for Admin Bar’ checked. This allows the plugin to give the WordPress admin bar, which is only visible to logged-in users, some extra space.

On our test site, you can see that the admin bar is correctly displayed above the sticky menu:

If a user is visiting your website on a smaller screen, such as a mobile device, the next option allows you to unstick the navigation menu:

If you don’t like the way it looks, simply increase the resolution to 780px for this option. You can see how your site looks on mobile and tablet devices.

After making any changes to your options, don’t forget to click the Save Changes button.

Method 2: Create a Sticky Floating Navigation Menu by Hand

This method necessitates the inclusion of custom CSS code in your theme. For beginners, we don’t recommend it.

Before you start, we recommend that you read our guide on how to easily add custom CSS to your WordPress site.

To access the WordPress theme customizer, go to Appearance » Customize first.

Then, in the left pane, click on ‘Additional CSS,’ and paste in this CSS code.

Using the background: #fffffffffffffffffffffffffffffffffffffffffffff Change the number next to background if you want a different color. Note that this will result in a black-background navigation menu.

Simply replace #site-navigation with your navigation menu’s CSS ID, then hit the Publish button at the top of the page.

To see your sticky floating navigation menu in action, go to your website:

What if your navigation menu is normally displayed below rather than above the site header? If this is the case, this CSS code may overlap or appear too close to the site title and header before the user scrolls:

This can be easily adjusted by using some additional CSS code to add a margin to your header area:

Before the user scrolls down, the sticky navigation menu will no longer overlap your header: Replace site-branding with the header area’s CSS class.

We hope you found this article useful in creating a sticky floating navigation menu for your WordPress site. You might also be interested in our guide to creating a custom WordPress theme without writing any code, as well as our review of the best WordPress page builder plugins.

You can also find us on social media sites such as Twitter and Facebook. Please subscribe to our YouTube Channel for WordPress video tutorials if you enjoyed this article.

    Step-by-Step Instructions for Starting Your Own Podcast

    15 Things You Must Do Before Changing WordPress Themes Checklist

    Beginner’s Guide to Installing Google Analytics in WordPress

    How to Fix the WordPress Error Establishing a Database Connection

    Editorial Staff Information

    WPBeginner’s Editorial Staff is a group of WordPress experts led by Syed Balkhi. Over 1.3 million readers around the world rely on it.

    Thank you so much!! I’m not sure where to put the 5 stars.

    We’re glad our guide was useful.

    So simple to understand and follow. Thank you so much for this informative post!!!

    We’re glad our guide was useful.

    Anyone know why this is happening or how to fix it? I used Method 2 and it worked right away, but when I opened the website on my phone, the menu buttons had vanished. This is a fantastic practical tutorial.

    Greetings!

    If you haven’t already done so, we recommend contacting the support team for your specific theme to see if the issue is due to a CSS conflict.

    Thank you very much! Serena is a character in the film Serena Hello there, How do you make a sticky floating menu that moves down as you scroll down the right hand side of a page rather than at the top?

    That would be adding a sticky widget, which we recommend in the following article:

    https://kiuz.it/plugins/wordpress/how-to-create-a-sticky-floating-sidebar-widget/

    Thank you very much. It worked right away.

    Thank you very much.

    Thank you very much. the level of perfection and the manner in which the information is presented…

    We’re glad our guide was useful.

    I can’t seem to locate it. How do I find out what my navbar’s id is?

    Below is a guide to using the inspect element correctly: You’d use the inspect element to accomplish this.

    https://kiuz.it/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site-with-kiuz.it/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site-with-kiuz

    I can’t thank you enough for saving my life.

    Thank you very much.

    I learned a little CSS and attempted, but failed, to make my nav sticky using a free theme (GeneratePress). It worked like a charm 😀 Hello there! Thank you for your assistance! (I tried CSS’s “position: sticky;”), but it was your code that helped me fix it.

    We hope you found our article useful.

    That’s exactly what I was looking for! This is a fantastic plugin. Thank you very much.

    Thank you for taking the time to read our advice.

    Just a quick q: when scrolling down, the background of my menu is transparent. Thank you very much for your assistance – Any quick fixes or tricks for adding a solid color (white in our case) behind it?

    It depends on how your menu is set up, but inspect element can help you find the object to which you can assign the background-color property: https://kiuz.it/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/

    Thank you very much. When Wpbeginner writes a blog post about a topic, it is almost always informative.

    We’re glad our information was useful.

    Thank you very much. You brightened my day.

    You’re welcome; we’re glad we could assist.

    The CSS code worked, but I had to add a margin to the header to get the entire title to show up. My menu bar spans the entire top of the screen, but the menu buttons begin on the left and end in the middle. How do I reposition the buttons so that they are in the center of the page?

    The specifics will vary from theme to theme, but you’ll almost always need to change the CSS. The inspect element can be used to test changes: https://kiuz.it/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/

    Wow, this is fantastic.

    Thank you very much.

    We’re happy to hear our solution worked for you.

    How do I do something similar to a row hover in a table created in Table Maker? I’ve imported the front cover images into Media, and now I want the images to appear as the viewer scrolls down the list. In a table, I have a list of books.

    So I used it for a sidebar, but when it gets too long, it won’t fit on the screen and I won’t be able to scroll down. How can I make this scrollable navigation menu that is fixed?

    Hello there, How do I display HTML codes like this in a post? In this post, how did you write the code LIKE A CODE? Thank you.

    You probably already knew, but for those who don’t, use the html character for the opening bracket on the html tags < without the space.

    https://kiuz.it/wp-tutorials/display-code-on-your-wordpress-site-easily/ That is one method; however, in this case, we will use the second method described in our article:

    I’m able to use your CSS code. This is an excellent article!

    I couldn’t even find the CSS code…. I even looked in the code for “nav id” and found nothing similar! Do you have any idea why?

    Very helpful!

    Thank you very much.

    You can also use “z-index: 999xxxx” for your logo or any other element you want to put on the navbar.

    I’m trying to figure out how to create a sticky menu within a WordPress post or page. Thank you… For example, in a long post, the post’s headings and subheadings should be presented in a sticky menu so that readers can easily navigate from one section to the next.

    Thank you for the instruction!

    a drop-down menu As a result, it isn’t visible until you hover over it… What I’m looking for is a’mini-menu’ that appears when you hover over the menu…

    I’d be grateful if you could make this tutorial.

    You can use a mega-menu or uber menu plugin, but you can also make it with css or jquery, as shown in the bootstrap3 menu.

Leave a Comment