How do I add a sticky navigation bar on scroll in WordPress?

Over the years, I've implemented sticky menu bars to many of WordPress websites. Your theme and level of experience with plugins or code will determine the best approach.

I normally advise using a plugin if you're looking for a quick and easy fix. These are the ones I've had good results with:

myStickymenu
Super easy to set up. You just install it, point it to your header or menu, and it becomes sticky when you scroll.

Sticky Menu (or Anything!) on Scroll
A bit more flexible. Lets you stick any element on the page, not just the nav bar. I've used it for floating call-to-actions too.

If you're comfortable with a bit of CSS, you can skip the plugin and do it manually. I usually just apply position: sticky or fixed, and set top: 0. But keep in mind, it behaves differently in some browsers. So always test it in Chrome, Firefox, Safari and Edge.

What I’ve learned the hard way is this: always check how your sticky nav behaves on mobile. Sometimes it covers content or breaks layouts. I like to disable sticky behavior on smaller screens unless it’s really needed.

In short, use a plugin if you want to keep it simple. Write your own CSS if you want full control. Either way, test it on real devices. What works in one browser might not in another.

To add a sticky navigation bar on scroll in WordPress, you have a few options depending on your theme and tools:

1-Theme Settings: Some themes include a built-in sticky header option. Go to Appearance > Customize, then check the Header or Menu section for a “Sticky” or “Fixed” setting.

2-With a Plugin: Use a plugin like myStickymenu or Sticky Menu (or Anything!). Install and activate it, then select your navigation menu's CSS ID or class (e.g., #site-navigation) to make it sticky.

3-With Custom CSS: If you’re comfortable with code, add this CSS under Appearance > Customize > Additional CSS:

    css

    .site-header { position: sticky; top: 0; z-index: 9999; background: #fff; }

    Adjust the class (.site-header) to match your theme’s header.

    Sticky menus help improve navigation and user experience, especially on longer pages.

4-If you're using Elementor Pro, or elementor header and footer plugin, you can easily make your navigation bar sticky. Just edit your header template in the Theme Builder, select the section with your menu, go to the Advanced tab, and under Motion Effects, set it to Sticky: Top. You can also choose which devices it applies to and add scroll effects if desired. It’s a simple, code-free way to keep your menu visible as users scroll.

To add a sticky navigation bar on scroll in WordPress, use CSS with position: fixed; top: 0; width: 100%; or a plugin like "Sticky Menu & Sticky Header." For advanced control, use JavaScript to add a sticky class when scrolling.

How to Add a Sticky Navigation Bar on Scroll in WordPress

Rapid, Concise, and Clear as Always – Let’s Dive In!

Using a Plugin:
A simple way to add a sticky navigation bar is by using a plugin like "myStickymenu" or "WP Sticky." These plugins enable you to make any element sticky, including your navigation bar, with minimal configuration. Simply install the plugin, configure the settings, and you're done!

Using Custom CSS:
If you prefer a manual approach, you can add custom CSS to create a sticky navigation bar. 

Modifying Theme Files:
If you're familiar with theme customization, you can modify the header.php or nav menu files directly. For more control, implement JavaScript to add the sticky behavior on scroll. This method allows for a fully custom solution but requires some coding knowledge.

Pro Tip:
Test your sticky navigation bar on different screen sizes and devices to ensure it works well across mobile and desktop views.

Lorenzo | Casios Visual Studio

To add a sticky navigation bar on scroll in WordPress:

CSS Method:

Add custom CSS to your theme:

.sticky-nav { position: fixed; top: 0; width: 100%; z-index: 1000; }

JavaScript/jQuery Method:

Add the following jQuery script:

jQuery(window).scroll(function() { if (jQuery(this).scrollTop() > 100) { jQuery(".nav-bar").addClass("sticky-nav"); } else { jQuery(".nav-bar").removeClass("sticky-nav"); } });

This will make the navigation bar stick at the top when you scroll past it.

Steps to Add a Sticky Navigation Bar:

Identify the Navigation Bar's CSS Class/ID: Inspect your website's navigation bar (using browser dev tools) to find its class or ID, such as .navbar or #site-navigation.

Add the CSS Code:
Use this CSS to make it sticky:
 

.navbar {
position: sticky;
top: 0;
z-index: 999;
background-color: #fff; /* Optional for visibility */
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Optional for style */
}

Where to Add It:

>Go to your WordPress Dashboard.

>Navigate to Appearance > Customize > Additional CSS.

Paste the code and click Publish.

Test the Sticky Behavior: Refresh your site and scroll to confirm the navigation bar stays fixed at the top. Adjust the .navbar class to match your theme’s specific navigation class/ID.

Forming a sticky navigation bar on scrolling in WordPress is a user-friendly solution which lets the visitors navigate through your site in a much easier way. Here are the necessary steps to reach this goal!

Opting for the Correct Plugin  
A user-friendly method to integrate a sticky navigation bar is via the use of a specific plugin. Attachments like the Sticky Menu (or Anything!) on Scroll can do it as easy as it gets.

Pro tip: To find the best plugin for your needs, you should always check the user ratings and read the reviews!

Contrasting the Header in Theme Settings  
Most WordPress themes come with built-in settings, like sticky heads. You can access the page for the custom settings of your theme and search for either the header or menu sections.

Pro tip: Check out various menu styles in order to determine what complements your website's design the most.

Incorporating Custom CSS for More Control  
If you have knowledge of coding, you can insert custom CSS for even greater control of your sticky navigation bar. Just simply go to the Appearance > Customize > Additional CSS webpage.

Pro tip: For a smooth effect, use the properties like `position: sticky;` and `top: 0;`.

Applying JavaScript for Interactive Functionality  
For the advanced users, integrating JavaScript can provide such functions as changing the menu style once it sticks.

Pro tip: You can use jQuery to make it easier. Just don't forget to enqueue your scripts properly.

Verifying on Several Devices  
You should always check your sticky navigation bar on various devices and browsers to see to it that they work correctly.

Pro tip: The browser developer tools can be used to `simulate` devices with other screen sizes as well as `test` response!

To add a sticky navigation bar on scroll in WordPress, you can either use a plugin, apply custom CSS, or utilize a theme builder like Elementor. Here's how:

1. Using a Plugin (Recommended for Beginners)

Install a Sticky Menu Plugin:

Go to your WordPress Dashboard > Plugins > Add New.

Search for "myStickymenu" or "Sticky Menu (or Anything) on Scroll".

Install and activate the plugin.

Configure the Plugin:

Once activated, go to the plugin’s settings (usually found in Settings > Sticky Menu).

Choose the navigation bar you want to make sticky, and adjust other settings like animation, z-index, etc.