WPBeginner

Beginner's Guide for WordPress

  • Blog
    • Beginners Guide
    • News
    • Opinion
    • Showcase
    • Themes
    • Tutorials
    • WordPress Plugins
  • Start Here
    • How to Start a Blog
    • Create a Website
    • Start an Online Store
    • Best Website Builder
    • Email Marketing
    • WordPress Hosting
    • Business Name Ideas
  • Deals
    • Bluehost Coupon
    • SiteGround Coupon
    • WP Engine Coupon
    • HostGator Coupon
    • Domain.com Coupon
    • Constant Contact
    • View All Deals »
  • Glossary
  • Videos
  • Products
X
☰
Beginner's Guide for WordPress / Start your WordPress Blog in minutes
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
Recommended
WordPress Plugins
View all Guides

WPBeginner» Blog» Themes» How to Create a Sticky Floating Navigation Menu in WordPress

How to Create a Sticky Floating Navigation Menu in WordPress

Last updated on October 5th, 2020 by Editorial Staff
446 Shares
Share
Tweet
Share
Pin
Free WordPress Video Tutorials on YouTube by WPBeginner
How to Create a Sticky Floating Navigation Menu in WordPress

Recently, one of our users asked us how to create a sticky navigation menu for their site?

Sticky navigation menus stay on the screen as users scroll down the page. This makes the top menu always visible, which is good for user experience because it contains links to the most important sections of your website.

In this article, we’ll show you how to easily create a sticky floating navigation menu in WordPress.

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 makes your menu visible to users at all times.

Here’s a sticky menu in action. We’re going to show you how to create a menu exactly like this for your own site:

A sticky navigation menu in action on our demo website

Why and when sticky menus can be useful?

Usually, the top navigation menu contains links to the most important sections of a website. A floating menu makes those links always visible, which saves users from scrolling back to the top. It is also proven to increase conversions.

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

Some of the best WordPress themes have built-in support for a sticky navigation menu. Simply see your theme settings under Themes » Customize to enable this feature.

If your theme does not have this option, then keep reading, and we’ll show you how to easily create a sticky floating navigation menu in any WordPress theme or WooCommerce store.

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

This is the easiest method. We recommend it for all WordPress users, particularly for beginners.

If you haven’t set up your navigation menu yet, go ahead and do that using our instructions on how to add a navigation menu in WordPress.

After that, you need to 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 the Settings » Sticky Menu (or Anything!) page to configure the plugin settings.

The Sticky Menu plugin's settings page

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.

Inspecting the navigation menu element on your website

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 that relates to your navigation, or your site header. It will look something like this:

<nav id="site-navigation" class="main-navigation" role="navigation">

If you’re struggling to find it, bring your mouse cursor over the different lines of code in the Inspect pane. The navigation menu will be fully highlighted when you have the right line of code:

Finding the navigation menu ID using the inspect tool

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

All you need to do is enter your menu’s CSS ID in the plugin settings with a hash at the start. In this case, that’s #site-navigation.

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

Don’t forget to click the ‘Save Changes’ button at the bottom of the page.

Now, go ahead and check out your sticky menu live on your WordPress website. It should stay on the page as you scroll down, like this:

Viewing the sticky menu on your website

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 only need to use this setting if your menu is overlapping an element that you do not want to be hidden. If not, then ignore this setting.

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

Here, you can see that the admin bar on our test site is correctly displaying above the sticky menu:

The WordPress admin bar appears above the sticky menu

The next option allows you unstick the navigation menu if a user is visiting your website using a smaller screen such as a mobile device:

The sticky menu plugin offers further options too

You can test how your site looks on mobile devices or tablets. If you don’t like how it looks, simply add 780px for this option.

Don’t forget to click on the Save Changes button after making any changes to your options.

Method 2: Manually Add a Sticky Floating Navigation Menu

This method requires you to add custom CSS code to your theme. We don’t recommend it for beginners.

We also recommend that you take a look at our guide on how to easily add custom CSS to your WordPress site before you begin.

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 pane and then add this 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;
}

Note: This will produce a navigation menu with a black background. If you want a different color, change the number next to background. For example, using background: #ffffff will give you a white menu background.

Just replace #site-navigation with the CSS ID of your navigation menu then click on the Publish button at the top of the screen.

Go ahead and visit your website to see your sticky floating navigation menu in action:

A sticky / floating navigation menu created using CSS

What if your navigation menu normally appears below the site header instead of above it? If so, this CSS code could overlap the site title and header or appear too close to it before the user scrolls:

The sticky navigation menu is slightly overlapping the site title

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

.site-branding {
margin-top:60px !important;
}

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

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 create a custom WordPress theme without writing any code, 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.

446 Shares
Share
Tweet
Share
Pin
Popular on WPBeginner Right Now!
  • Revealed: Why Building an Email List is so Important Today (6 Reasons)

    Revealed: Why Building an Email List is so Important Today (6 Reasons)

  • How to Fix the Error Establishing a Database Connection in WordPress

    How to Fix the Error Establishing a Database Connection in WordPress

  • Checklist

    Checklist: 15 Things You MUST DO Before Changing WordPress Themes

  • How to Properly Move Your Blog from WordPress.com to WordPress.org

About the Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi. Trusted by over 1.3 million readers worldwide.

The Ultimate WordPress Toolkit

38 Comments

Leave a Reply
  1. Ivaylo says:
    Dec 16, 2020 at 8:20 am

    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!

    Reply
    • WPBeginner Support says:
      Dec 16, 2020 at 9:44 am

      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

      Reply
  2. Serena Richardson says:
    Nov 18, 2020 at 3:29 am

    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

    Reply
    • WPBeginner Support says:
      Nov 18, 2020 at 10:46 am

      That would be adding a sticky widget which we have a recommendation in our article below:

      https://www.wpbeginner.com/plugins/how-to-create-a-sticky-floating-sidebar-widget-in-wordpress/

      Reply
  3. Tom Browne says:
    Oct 20, 2020 at 6:59 pm

    Worked instantly. Thank you

    Reply
    • WPBeginner Support says:
      Oct 21, 2020 at 9:51 am

      You’re welcome :)

      Reply
  4. simran says:
    Oct 6, 2020 at 7:56 am

    level of perfection and the way of present the information …thanks you..

    Reply
    • WPBeginner Support says:
      Oct 6, 2020 at 10:27 am

      Glad our guide was helpful :)

      Reply
  5. Theo says:
    Jul 8, 2020 at 4:07 pm

    Where do I find out the id of my navbar?
    Can’t find it.

    Reply
    • WPBeginner Support says:
      Jul 9, 2020 at 8:50 am

      To do that you would use inspect element. We have a guide on how to properly use inspect element below:

      https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site

      Reply
  6. Natasha T says:
    Jul 3, 2020 at 2:06 pm

    A lifesaver, can’t thank you enough.

    Reply
    • WPBeginner Support says:
      Jul 7, 2020 at 11:38 am

      You’re welcome :)

      Reply
  7. Tam says:
    May 14, 2020 at 6:52 pm

    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 :)

    Reply
    • WPBeginner Support says:
      May 15, 2020 at 8:52 am

      Glad our article was helpful :)

      Reply
  8. alexandre says:
    Feb 16, 2020 at 2:51 pm

    Just what I was looking for! Great plugin.Thank’s

    Reply
    • WPBeginner Support says:
      Feb 17, 2020 at 11:42 am

      You’re welcome, glad you found our recommendation helpful :)

      Reply
  9. Guy Bailey says:
    May 2, 2019 at 5:55 am

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

    Reply
    • WPBeginner Support says:
      May 2, 2019 at 10:54 am

      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/

      Reply
  10. Manish says:
    Apr 19, 2019 at 12:45 am

    Thank You. When Wpbeginner writes a blog post on a topic, it is bound to be helpful.

    Reply
    • WPBeginner Support says:
      Apr 19, 2019 at 11:02 am

      Glad our content has been helpful :)

      Reply
  11. Everest says:
    Apr 4, 2019 at 2:59 pm

    Thanks so much.
    You made my day.

    Reply
    • WPBeginner Support says:
      Apr 5, 2019 at 10:49 am

      You’re welcome, glad we could help :)

      Reply
  12. Tony Chung says:
    Jan 11, 2019 at 6:05 pm

    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?

    Reply
    • WPBeginner Support says:
      Jan 14, 2019 at 1:34 pm

      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/

      Reply
  13. Chinedu says:
    Jan 9, 2019 at 8:01 am

    Wow, This works perfectly.

    Thank you

    Reply
    • WPBeginner Support says:
      Jan 9, 2019 at 11:40 am

      Glad our solution worked for you :)

      Reply
  14. Gillian Davies says:
    Nov 27, 2018 at 4:44 am

    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?

    Reply
  15. Raul says:
    Apr 16, 2018 at 7:00 pm

    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.

    Reply
  16. Rushikesh Thawale says:
    Oct 6, 2017 at 3:50 pm

    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.

    Reply
    • Tara says:
      Jun 17, 2019 at 4:18 pm

      You’ve probably found out by now, but for those searching, how to show your code on your post use the html character for the opening bracket on the html tags &lt ; without the space.

      Reply
      • WPBeginner Support says:
        Jun 18, 2019 at 10:30 am

        That is one method but for this, we’re using the second method in our article here: https://www.wpbeginner.com/wp-tutorials/how-to-easily-display-code-on-your-wordpress-site/

        Reply
  17. Cesar says:
    Sep 24, 2017 at 7:23 pm

    Great post! your CSS code works for me :D

    Reply
  18. dani says:
    Sep 6, 2017 at 4:01 am

    :( 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?

    Reply
  19. Alain says:
    Jul 18, 2017 at 12:22 pm

    Very usefull !

    thank you.

    Reply
  20. amin says:
    Apr 13, 2017 at 3:10 pm

    Also you can “z-index: 999xxxx” for logo or any element that you want put it on navbar

    Reply
  21. Sujith Reghu says:
    Apr 12, 2017 at 10:03 am

    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…

    Reply
  22. Zac says:
    Apr 9, 2017 at 4:05 am

    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.

    Reply
    • amin says:
      Apr 13, 2017 at 3:17 pm

      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

      Reply

Leave a Reply Cancel 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.

Over 1,320,000+ Readers

Get fresh content from WPBeginner

Featured WordPress Plugin
RafflePress - WordPress Giveaway and Contest Plugin
RafflePress
Giveaway and Contest Plugin for WordPress. Learn More »
How to Start a Blog How to Start a Blog
I need help with ...
Starting a
Blog
WordPress
Performance
WordPress
Security
WordPress
SEO
WordPress
Errors
Building an
Online Store
Useful WordPress Guides
    • 7 Best WordPress Backup Plugins Compared (Pros and Cons)
    • How to Fix the Error Establishing a Database Connection in WordPress
    • Why You Need a CDN for your WordPress Blog? [Infographic]
    • 30 Legit Ways to Make Money Online Blogging with WordPress
    • Self Hosted WordPress.org vs. Free WordPress.com [Infograph]
    • Free Recording: WordPress Workshop for Beginners
    • 24 Must Have WordPress Plugins for Business Websites
    • How to Properly Move Your Blog from WordPress.com to WordPress.org
    • 5 Best Contact Form Plugins for WordPress Compared
    • Which is the Best WordPress Popup Plugin? (Comparison)
    • Best WooCommerce Hosting in 2020 (Comparison)
    • How to Fix the Internal Server Error in WordPress
    • How to Install WordPress - Complete WordPress Installation Tutorial
    • Why You Should Start Building an Email List Right Away
    • How to Properly Move WordPress to a New Domain Without Losing SEO
    • How to Choose the Best WordPress Hosting for Your Website
    • How to Choose the Best Blogging Platform (Comparison)
    • WordPress Tutorials - 200+ Step by Step WordPress Tutorials
    • 5 Best WordPress Ecommerce Plugins Compared
    • 5 Best WordPress Membership Plugins (Compared)
    • 7 Best Email Marketing Services for Small Business (2020)
    • How to Choose the Best Domain Registrar (Compared)
    • The Truth About Shared WordPress Web Hosting
    • When Do You Really Need Managed WordPress Hosting?
    • 5 Best Drag and Drop WordPress Page Builders Compared
    • How to Switch from Blogger to WordPress without Losing Google Rankings
    • How to Properly Switch From Wix to WordPress (Step by Step)
    • How to Properly Move from Weebly to WordPress (Step by Step)
    • Do You Really Need a VPS? Best WordPress VPS Hosting Compared
    • How to Properly Move from Squarespace to WordPress
    • How to Register a Domain Name (+ tip to get it for FREE)
    • HostGator Review - An Honest Look at Speed & Uptime (2020)
    • SiteGround Reviews from 4196 Users & Our Experts (2020)
    • Bluehost Review from Real Users + Performance Stats (2020)
    • How Much Does It Really Cost to Build a WordPress Website?
    • How to Create an Email Newsletter the RIGHT WAY (Step by Step)
    • Free Business Name Generator (A.I Powered)
    • How to Create a Free Business Email Address in 5 Minutes (Step by Step)
    • How to Install Google Analytics in WordPress for Beginners
    • How to Move WordPress to a New Host or Server With No Downtime
    • Why is WordPress Free? What are the Costs? What is the Catch?
    • How to Make a Website in 2020 – Step by Step Guide
Deals & Coupons (view all)
SendinBlue Coupon Code
Sendinblue Coupon
Get Sendinblue, a powerful marketing automation toolkit for small businesses, for FREE.
StackPath's logo
StackPath (MaxCDN) Coupon
Get StackPath CDN for just $10/month! It's the same service we use to make our site super fast.
Featured In
About WPBeginner®

WPBeginner is a free WordPress resource site for Beginners. WPBeginner was founded in July 2009 by Syed Balkhi. The main goal of this site is to provide quality tips, tricks, hacks, and other WordPress resources that allows WordPress beginners to improve their site(s).
Join our team: We are Hiring!

Site Links
  • About Us
  • Contact Us
  • FTC Disclosure
  • Privacy Policy
  • Terms of Service
  • Free Blog Setup
  • Free Business Tools
Our Sites
  • OptinMonster
  • MonsterInsights
  • WPForms
  • SeedProd
  • Nameboy
  • RafflePress
  • Smash Balloon

Copyright © 2009 - 2021 WPBeginner LLC. All Rights Reserved. WPBeginner® is a registered trademark.

Managed by Awesome Motive | WordPress hosting by SiteGround | WordPress CDN by MaxCDN | WordPress Security by Sucuri.