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.
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.
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!).
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.
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">
<div class="wpcode-syntax-footer">
<div class="wpcode-syntax-code-footer-left">Hosted with ❤️ by <strong><a href="https://wpcode.com" target="_blank">WPCode</a></strong></div>
<div class="wpcode-syntax-code-footer-right">
<svg width="65" height="16" viewBox="0 0 65 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M38.0415 7.99972C38.0415 6.44437 38.4062 5.38018 39.128 4.59879C39.8499 3.80995 40.8769 3.42297 42.1941 3.42297C42.8117 3.42297 43.4071 3.54949 43.9206 3.80251C44.4564 4.05553 44.8582 4.39786 45.1782 4.82204C45.2452 4.9039 45.2601 4.99321 45.2601 5.09739C45.2601 5.2239 45.2155 5.31321 45.1336 5.39507C45.0517 5.47693 44.9624 5.52158 44.8359 5.52158C44.6871 5.52158 44.5829 5.4546 44.4936 5.35042C44.2555 5.03042 43.9429 4.75507 43.5113 4.53925C43.1094 4.32344 42.6555 4.21925 42.1643 4.21925C41.1224 4.21925 40.3336 4.53925 39.7755 5.17925C39.2248 5.81925 38.942 6.68995 38.942 7.96995C38.942 9.30948 39.2173 10.2025 39.7531 10.7979C40.2889 11.3932 41.0927 11.7132 42.1643 11.7132C42.6331 11.7132 43.0573 11.6313 43.4889 11.4379C43.8908 11.2444 44.2331 10.9913 44.4936 10.6267C44.5755 10.5225 44.6871 10.4555 44.8359 10.4555C44.9624 10.4555 45.0517 10.5002 45.1336 10.582C45.2155 10.6639 45.2601 10.7755 45.2601 10.8797C45.2601 10.9616 45.2378 11.0509 45.1782 11.1327C44.8806 11.5569 44.4713 11.8993 43.9206 12.1523C43.3699 12.4053 42.7894 12.5318 42.1717 12.5318C40.8322 12.5318 39.8052 12.1523 39.0982 11.4006C38.3987 10.6788 38.0415 9.59228 38.0415 7.99972Z" fill="#1F2937"></path><path d="M46.9268 11.7654C46.4356 11.237 46.1826 10.4258 46.1826 9.36164C46.1826 8.29745 46.4208 7.50862 46.9045 6.98024C47.3956 6.45187 48.0803 6.19141 48.9733 6.19141C49.8663 6.19141 50.551 6.44443 51.0422 6.98024C51.5333 7.50862 51.764 8.29745 51.764 9.36164C51.764 10.4258 51.5259 11.237 51.0422 11.7654C50.551 12.2937 49.8663 12.5765 48.9733 12.5765C48.1026 12.5765 47.418 12.3012 46.9268 11.7654ZM47.0608 9.36164C47.0608 10.9765 47.7008 11.7877 48.9808 11.7877C50.2608 11.7877 50.9008 10.9765 50.9008 9.36164C50.9008 7.74676 50.2608 6.93559 48.9808 6.93559C47.6933 6.93559 47.0608 7.76908 47.0608 9.36164Z" fill="#1F2937"></path><path d="M52.583 9.3839C52.583 7.25553 53.476 6.31786 55.2472 6.31786C55.6491 6.31786 56.0137 6.39972 56.3337 6.57088C56.6537 6.74204 56.9067 6.93553 57.0556 7.18855V3.84716C57.0556 3.72065 57.1002 3.63135 57.1821 3.54949C57.2639 3.46762 57.3532 3.42297 57.4798 3.42297C57.6063 3.42297 57.6956 3.46762 57.7774 3.54949C57.8593 3.63135 57.9039 3.72065 57.9039 3.84716V9.95693C57.9039 10.8053 57.6658 11.4453 57.1821 11.8918C56.7132 12.3383 56.0732 12.569 55.2844 12.569C54.4137 12.569 53.7291 12.2937 53.2602 11.7579C52.8137 11.2369 52.583 10.4481 52.583 9.3839ZM53.4314 9.3839C53.4314 10.9988 54.0491 11.81 55.3067 11.81C55.8425 11.81 56.2667 11.6611 56.5867 11.3411C56.9067 11.0211 57.0556 10.5746 57.0556 9.95693V8.25274C57.0332 8.23042 57.0109 8.18576 56.9886 8.12623C56.9663 8.05925 56.9067 7.97739 56.7951 7.85088C56.6909 7.72437 56.5793 7.59786 56.4528 7.48623C56.3263 7.38204 56.1551 7.29274 55.9616 7.21088C55.7458 7.12902 55.5374 7.08437 55.2993 7.08437C54.6816 7.08437 54.2351 7.27786 53.8928 7.67972C53.5802 8.08158 53.4314 8.57274 53.4314 9.3839Z" fill="#1F2937"></path><path d="M58.9312 9.36193C58.9312 8.3424 59.1693 7.55356 59.653 7.00286C60.1367 6.45216 60.8065 6.16937 61.6772 6.16937C62.0195 6.16937 62.3395 6.21402 62.5925 6.29588C62.8679 6.37774 63.106 6.48937 63.2772 6.63821C63.4484 6.78705 63.6195 6.93588 63.746 7.12937C63.8725 7.30054 63.9842 7.49402 64.0437 7.7024C64.1107 7.91821 64.1479 8.08193 64.1925 8.25309C64.2372 8.42426 64.2372 8.59542 64.2372 8.76658C64.2372 8.89309 64.2372 8.99728 64.2372 9.06426C64.2372 9.13123 64.2149 9.21309 64.1702 9.31728C64.1479 9.42147 64.0884 9.48844 63.9991 9.53309C63.9172 9.57774 63.8279 9.60007 63.7014 9.60007H59.8316C59.8316 10.2624 60.0028 10.7908 60.3674 11.1777C60.7321 11.5573 61.2232 11.7731 61.8409 11.7731C62.1832 11.7731 62.4809 11.7284 62.7116 11.6243C62.9498 11.5201 63.2028 11.3936 63.4335 11.2001C63.5153 11.1331 63.6046 11.1182 63.6716 11.1182C63.7758 11.1182 63.8651 11.1629 63.947 11.2224C64.0139 11.3043 64.0512 11.3936 64.0512 11.4977C64.0512 11.6019 64.0065 11.7136 63.9023 11.7954C63.8205 11.8773 63.6865 11.9889 63.5377 12.0931C63.3888 12.1973 63.1507 12.2866 62.8307 12.3908C62.5107 12.495 62.1684 12.5396 61.8037 12.5396C60.8884 12.5396 60.1814 12.2866 59.6902 11.7508C59.1916 11.2522 58.9312 10.4484 58.9312 9.36193ZM59.8093 8.87077H63.3888C63.3888 8.61774 63.3665 8.37961 63.307 8.17123C63.2623 7.95542 63.1805 7.76937 63.0539 7.57588C62.9274 7.3824 62.7563 7.23356 62.5181 7.12937C62.28 7.02519 62.0046 6.95821 61.6846 6.95821C61.1116 6.95821 60.68 7.12937 60.3377 7.4717C60.0251 7.80658 59.8316 8.27542 59.8093 8.87077Z" fill="#1F2937"></path><path d="M19.229 4.18977C19.229 3.97395 19.3109 3.78791 19.4671 3.63907C19.616 3.49023 19.8095 3.40837 20.0253 3.40837C20.2188 3.40837 20.3899 3.47535 20.5164 3.57954C20.643 3.68372 20.7323 3.81023 20.7695 3.94419L22.3248 9.51814L23.8355 3.96651C23.8802 3.79535 23.962 3.66884 24.1109 3.56465C24.2597 3.46047 24.4085 3.41581 24.5574 3.41581C24.7285 3.41581 24.8774 3.46047 25.0039 3.56465C25.1304 3.66884 25.242 3.79535 25.2792 3.96651L26.7899 9.51814L28.3453 3.92186C28.3899 3.79535 28.4718 3.66884 28.5983 3.55721C28.7248 3.45302 28.8737 3.38605 29.0895 3.38605C29.3053 3.38605 29.4764 3.45302 29.6253 3.60186C29.7741 3.7507 29.8411 3.92186 29.8411 4.13023C29.8411 4.21209 29.8188 4.3014 29.7964 4.36093L27.5118 11.9591C27.4671 12.1079 27.3853 12.2567 27.2364 12.3386C27.1099 12.4428 26.9611 12.4874 26.7899 12.4874C26.6188 12.4874 26.4699 12.4428 26.3434 12.3386C26.2169 12.2344 26.1276 12.1079 26.0904 11.9367L24.5574 6.4893L23.0244 11.9963C22.9797 12.1674 22.8755 12.294 22.749 12.3981C22.6225 12.5023 22.4513 12.547 22.2802 12.547C22.109 12.547 21.9602 12.5023 21.8337 12.3981C21.7071 12.294 21.5955 12.1674 21.5583 12.0186L19.2737 4.42791C19.2513 4.36093 19.229 4.27907 19.229 4.18977Z" fill="#1F2937"></path><path d="M30.9351 11.8101V4.18967C30.9351 3.97386 31.0169 3.81014 31.1509 3.6613C31.2997 3.51246 31.4932 3.4306 31.709 3.4306H34.2467C35.0802 3.4306 35.7425 3.6613 36.2485 4.13014C36.762 4.59898 37.0374 5.27618 37.0374 6.15432C37.0374 7.04735 36.7844 7.70967 36.2709 8.17851C35.7574 8.64735 35.0802 8.87805 34.269 8.87805H32.4978V11.8176C32.4978 12.0334 32.4309 12.2194 32.282 12.3683C32.1332 12.5171 31.962 12.5841 31.7239 12.5841C31.4858 12.5841 31.322 12.5022 31.1732 12.3534C31.002 12.1897 30.9351 12.0185 30.9351 11.8101ZM32.4755 7.48642H34.1202C34.5444 7.48642 34.8644 7.35991 35.1025 7.12177C35.3406 6.89107 35.4448 6.54874 35.4448 6.12456C35.4448 5.70037 35.3406 5.35805 35.1025 5.12735C34.8644 4.89665 34.5444 4.78502 34.1425 4.78502H32.4978V7.48642H32.4755V7.48642Z" fill="#1F2937"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M14.3916 15.9999H1.64367C0.720884 15.9999 -0.000976562 15.278 -0.000976562 14.3627V1.63709C-0.000976562 0.721738 0.720884 -0.00012207 1.64367 -0.00012207H14.3916C15.3069 -0.00012207 16.0362 0.721738 16.0362 1.63709V14.3627C16.0362 15.278 15.3069 15.9999 14.3916 15.9999ZM3.96553 13.0231C3.88367 13.0231 3.77205 13.0008 3.69019 12.9785C3.30321 12.8296 3.11716 12.4055 3.266 12.0185L6.61484 3.44546C6.76367 3.06592 7.18786 2.87244 7.57484 3.02127C7.96181 3.17011 8.14786 3.5943 7.99902 3.98127L4.66507 12.5543C4.56088 12.852 4.26321 13.0231 3.96553 13.0231ZM8.76554 11.9366C8.91437 12.0855 9.10786 12.1524 9.30135 12.1524C9.49484 12.1524 9.68833 12.0855 9.83716 11.9366L12.4567 9.33941C12.9255 8.87058 12.9255 8.08174 12.4567 7.6129L9.83716 4.99337C9.56181 4.69569 9.09298 4.69569 8.7953 4.99337C8.49763 5.26872 8.49763 5.73755 8.7953 6.03523L11.2065 8.46127L8.77298 10.8873C8.46042 11.1701 8.46042 11.6389 8.76554 11.9366Z" fill="#1F2937"></path></svg>
<a href="https://library.wpcode.com/use-snippet/" target="_blank">1-click Use in WordPress</a>
</div>
</div></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.
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.
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.
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.
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.’
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.
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.
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.
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;
}
<div class="wpcode-syntax-footer">
<div class="wpcode-syntax-code-footer-left">Hosted with ❤️ by <strong><a href="https://wpcode.com" target="_blank">WPCode</a></strong></div>
<div class="wpcode-syntax-code-footer-right">
<svg width="65" height="16" viewBox="0 0 65 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M38.0415 7.99972C38.0415 6.44437 38.4062 5.38018 39.128 4.59879C39.8499 3.80995 40.8769 3.42297 42.1941 3.42297C42.8117 3.42297 43.4071 3.54949 43.9206 3.80251C44.4564 4.05553 44.8582 4.39786 45.1782 4.82204C45.2452 4.9039 45.2601 4.99321 45.2601 5.09739C45.2601 5.2239 45.2155 5.31321 45.1336 5.39507C45.0517 5.47693 44.9624 5.52158 44.8359 5.52158C44.6871 5.52158 44.5829 5.4546 44.4936 5.35042C44.2555 5.03042 43.9429 4.75507 43.5113 4.53925C43.1094 4.32344 42.6555 4.21925 42.1643 4.21925C41.1224 4.21925 40.3336 4.53925 39.7755 5.17925C39.2248 5.81925 38.942 6.68995 38.942 7.96995C38.942 9.30948 39.2173 10.2025 39.7531 10.7979C40.2889 11.3932 41.0927 11.7132 42.1643 11.7132C42.6331 11.7132 43.0573 11.6313 43.4889 11.4379C43.8908 11.2444 44.2331 10.9913 44.4936 10.6267C44.5755 10.5225 44.6871 10.4555 44.8359 10.4555C44.9624 10.4555 45.0517 10.5002 45.1336 10.582C45.2155 10.6639 45.2601 10.7755 45.2601 10.8797C45.2601 10.9616 45.2378 11.0509 45.1782 11.1327C44.8806 11.5569 44.4713 11.8993 43.9206 12.1523C43.3699 12.4053 42.7894 12.5318 42.1717 12.5318C40.8322 12.5318 39.8052 12.1523 39.0982 11.4006C38.3987 10.6788 38.0415 9.59228 38.0415 7.99972Z" fill="#1F2937"></path><path d="M46.9268 11.7654C46.4356 11.237 46.1826 10.4258 46.1826 9.36164C46.1826 8.29745 46.4208 7.50862 46.9045 6.98024C47.3956 6.45187 48.0803 6.19141 48.9733 6.19141C49.8663 6.19141 50.551 6.44443 51.0422 6.98024C51.5333 7.50862 51.764 8.29745 51.764 9.36164C51.764 10.4258 51.5259 11.237 51.0422 11.7654C50.551 12.2937 49.8663 12.5765 48.9733 12.5765C48.1026 12.5765 47.418 12.3012 46.9268 11.7654ZM47.0608 9.36164C47.0608 10.9765 47.7008 11.7877 48.9808 11.7877C50.2608 11.7877 50.9008 10.9765 50.9008 9.36164C50.9008 7.74676 50.2608 6.93559 48.9808 6.93559C47.6933 6.93559 47.0608 7.76908 47.0608 9.36164Z" fill="#1F2937"></path><path d="M52.583 9.3839C52.583 7.25553 53.476 6.31786 55.2472 6.31786C55.6491 6.31786 56.0137 6.39972 56.3337 6.57088C56.6537 6.74204 56.9067 6.93553 57.0556 7.18855V3.84716C57.0556 3.72065 57.1002 3.63135 57.1821 3.54949C57.2639 3.46762 57.3532 3.42297 57.4798 3.42297C57.6063 3.42297 57.6956 3.46762 57.7774 3.54949C57.8593 3.63135 57.9039 3.72065 57.9039 3.84716V9.95693C57.9039 10.8053 57.6658 11.4453 57.1821 11.8918C56.7132 12.3383 56.0732 12.569 55.2844 12.569C54.4137 12.569 53.7291 12.2937 53.2602 11.7579C52.8137 11.2369 52.583 10.4481 52.583 9.3839ZM53.4314 9.3839C53.4314 10.9988 54.0491 11.81 55.3067 11.81C55.8425 11.81 56.2667 11.6611 56.5867 11.3411C56.9067 11.0211 57.0556 10.5746 57.0556 9.95693V8.25274C57.0332 8.23042 57.0109 8.18576 56.9886 8.12623C56.9663 8.05925 56.9067 7.97739 56.7951 7.85088C56.6909 7.72437 56.5793 7.59786 56.4528 7.48623C56.3263 7.38204 56.1551 7.29274 55.9616 7.21088C55.7458 7.12902 55.5374 7.08437 55.2993 7.08437C54.6816 7.08437 54.2351 7.27786 53.8928 7.67972C53.5802 8.08158 53.4314 8.57274 53.4314 9.3839Z" fill="#1F2937"></path><path d="M58.9312 9.36193C58.9312 8.3424 59.1693 7.55356 59.653 7.00286C60.1367 6.45216 60.8065 6.16937 61.6772 6.16937C62.0195 6.16937 62.3395 6.21402 62.5925 6.29588C62.8679 6.37774 63.106 6.48937 63.2772 6.63821C63.4484 6.78705 63.6195 6.93588 63.746 7.12937C63.8725 7.30054 63.9842 7.49402 64.0437 7.7024C64.1107 7.91821 64.1479 8.08193 64.1925 8.25309C64.2372 8.42426 64.2372 8.59542 64.2372 8.76658C64.2372 8.89309 64.2372 8.99728 64.2372 9.06426C64.2372 9.13123 64.2149 9.21309 64.1702 9.31728C64.1479 9.42147 64.0884 9.48844 63.9991 9.53309C63.9172 9.57774 63.8279 9.60007 63.7014 9.60007H59.8316C59.8316 10.2624 60.0028 10.7908 60.3674 11.1777C60.7321 11.5573 61.2232 11.7731 61.8409 11.7731C62.1832 11.7731 62.4809 11.7284 62.7116 11.6243C62.9498 11.5201 63.2028 11.3936 63.4335 11.2001C63.5153 11.1331 63.6046 11.1182 63.6716 11.1182C63.7758 11.1182 63.8651 11.1629 63.947 11.2224C64.0139 11.3043 64.0512 11.3936 64.0512 11.4977C64.0512 11.6019 64.0065 11.7136 63.9023 11.7954C63.8205 11.8773 63.6865 11.9889 63.5377 12.0931C63.3888 12.1973 63.1507 12.2866 62.8307 12.3908C62.5107 12.495 62.1684 12.5396 61.8037 12.5396C60.8884 12.5396 60.1814 12.2866 59.6902 11.7508C59.1916 11.2522 58.9312 10.4484 58.9312 9.36193ZM59.8093 8.87077H63.3888C63.3888 8.61774 63.3665 8.37961 63.307 8.17123C63.2623 7.95542 63.1805 7.76937 63.0539 7.57588C62.9274 7.3824 62.7563 7.23356 62.5181 7.12937C62.28 7.02519 62.0046 6.95821 61.6846 6.95821C61.1116 6.95821 60.68 7.12937 60.3377 7.4717C60.0251 7.80658 59.8316 8.27542 59.8093 8.87077Z" fill="#1F2937"></path><path d="M19.229 4.18977C19.229 3.97395 19.3109 3.78791 19.4671 3.63907C19.616 3.49023 19.8095 3.40837 20.0253 3.40837C20.2188 3.40837 20.3899 3.47535 20.5164 3.57954C20.643 3.68372 20.7323 3.81023 20.7695 3.94419L22.3248 9.51814L23.8355 3.96651C23.8802 3.79535 23.962 3.66884 24.1109 3.56465C24.2597 3.46047 24.4085 3.41581 24.5574 3.41581C24.7285 3.41581 24.8774 3.46047 25.0039 3.56465C25.1304 3.66884 25.242 3.79535 25.2792 3.96651L26.7899 9.51814L28.3453 3.92186C28.3899 3.79535 28.4718 3.66884 28.5983 3.55721C28.7248 3.45302 28.8737 3.38605 29.0895 3.38605C29.3053 3.38605 29.4764 3.45302 29.6253 3.60186C29.7741 3.7507 29.8411 3.92186 29.8411 4.13023C29.8411 4.21209 29.8188 4.3014 29.7964 4.36093L27.5118 11.9591C27.4671 12.1079 27.3853 12.2567 27.2364 12.3386C27.1099 12.4428 26.9611 12.4874 26.7899 12.4874C26.6188 12.4874 26.4699 12.4428 26.3434 12.3386C26.2169 12.2344 26.1276 12.1079 26.0904 11.9367L24.5574 6.4893L23.0244 11.9963C22.9797 12.1674 22.8755 12.294 22.749 12.3981C22.6225 12.5023 22.4513 12.547 22.2802 12.547C22.109 12.547 21.9602 12.5023 21.8337 12.3981C21.7071 12.294 21.5955 12.1674 21.5583 12.0186L19.2737 4.42791C19.2513 4.36093 19.229 4.27907 19.229 4.18977Z" fill="#1F2937"></path><path d="M30.9351 11.8101V4.18967C30.9351 3.97386 31.0169 3.81014 31.1509 3.6613C31.2997 3.51246 31.4932 3.4306 31.709 3.4306H34.2467C35.0802 3.4306 35.7425 3.6613 36.2485 4.13014C36.762 4.59898 37.0374 5.27618 37.0374 6.15432C37.0374 7.04735 36.7844 7.70967 36.2709 8.17851C35.7574 8.64735 35.0802 8.87805 34.269 8.87805H32.4978V11.8176C32.4978 12.0334 32.4309 12.2194 32.282 12.3683C32.1332 12.5171 31.962 12.5841 31.7239 12.5841C31.4858 12.5841 31.322 12.5022 31.1732 12.3534C31.002 12.1897 30.9351 12.0185 30.9351 11.8101ZM32.4755 7.48642H34.1202C34.5444 7.48642 34.8644 7.35991 35.1025 7.12177C35.3406 6.89107 35.4448 6.54874 35.4448 6.12456C35.4448 5.70037 35.3406 5.35805 35.1025 5.12735C34.8644 4.89665 34.5444 4.78502 34.1425 4.78502H32.4978V7.48642H32.4755V7.48642Z" fill="#1F2937"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M14.3916 15.9999H1.64367C0.720884 15.9999 -0.000976562 15.278 -0.000976562 14.3627V1.63709C-0.000976562 0.721738 0.720884 -0.00012207 1.64367 -0.00012207H14.3916C15.3069 -0.00012207 16.0362 0.721738 16.0362 1.63709V14.3627C16.0362 15.278 15.3069 15.9999 14.3916 15.9999ZM3.96553 13.0231C3.88367 13.0231 3.77205 13.0008 3.69019 12.9785C3.30321 12.8296 3.11716 12.4055 3.266 12.0185L6.61484 3.44546C6.76367 3.06592 7.18786 2.87244 7.57484 3.02127C7.96181 3.17011 8.14786 3.5943 7.99902 3.98127L4.66507 12.5543C4.56088 12.852 4.26321 13.0231 3.96553 13.0231ZM8.76554 11.9366C8.91437 12.0855 9.10786 12.1524 9.30135 12.1524C9.49484 12.1524 9.68833 12.0855 9.83716 11.9366L12.4567 9.33941C12.9255 8.87058 12.9255 8.08174 12.4567 7.6129L9.83716 4.99337C9.56181 4.69569 9.09298 4.69569 8.7953 4.99337C8.49763 5.26872 8.49763 5.73755 8.7953 6.03523L11.2065 8.46127L8.77298 10.8873C8.46042 11.1701 8.46042 11.6389 8.76554 11.9366Z" fill="#1F2937"></path></svg>
<a href="https://library.wpcode.com/use-snippet/" target="_blank">1-click Use in WordPress</a>
</div>
</div></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.
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.
Paul says
Where do i leave the 5 Stars…..thank-you very much!!
WPBeginner Support says
Glad our guide was helpful
Admin
Jess says
Thank you so so much for this helpful post!!! So clear and easy to follow.
WPBeginner Support says
Glad our guide was helpful
Admin
Ivaylo says
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!
WPBeginner Support says
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
Serena Richardson says
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
WPBeginner Support says
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/
Admin
Tom Browne says
Worked instantly. Thank you
WPBeginner Support says
You’re welcome
Admin
simran says
level of perfection and the way of present the information …thanks you..
WPBeginner Support says
Glad our guide was helpful
Admin
Theo says
Where do I find out the id of my navbar?
Can’t find it.
WPBeginner Support says
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
Admin
Natasha T says
A lifesaver, can’t thank you enough.
WPBeginner Support says
You’re welcome
Admin
Tam says
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
WPBeginner Support says
Glad our article was helpful
Admin
alexandre says
Just what I was looking for! Great plugin.Thank’s
WPBeginner Support says
You’re welcome, glad you found our recommendation helpful
Admin
Guy Bailey says
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)?
WPBeginner Support says
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/
Admin
Manish says
Thank You. When Wpbeginner writes a blog post on a topic, it is bound to be helpful.
WPBeginner Support says
Glad our content has been helpful
Admin
Everest says
Thanks so much.
You made my day.
WPBeginner Support says
You’re welcome, glad we could help
Admin
Tony Chung says
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?
WPBeginner Support says
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/
Admin
Chinedu says
Wow, This works perfectly.
Thank you
WPBeginner Support says
Glad our solution worked for you
Admin
Gillian Davies says
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?
Raul says
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.
Rushikesh Thawale says
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.
Tara says
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 < ; without the space.
WPBeginner Support says
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/
Admin
Cesar says
Great post! your CSS code works for me
dani says
Alain says
Very usefull !
thank you.
amin says
Also you can “z-index: 999xxxx” for logo or any element that you want put it on navbar
Sujith Reghu says
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…
Zac says
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.
amin says
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