Do you want to increase your site’s user experience and need to learn how to create a sticky menu in WordPress?
If you are browsing the internet at all, you are familiar with the sticky menu, as most modern websites use it.
And the reason is plain and simple.
What’s the main benefit of a sticky menu/header?
It makes the navigation on any website much more accessible and intuitive.
This post covers:
- How to create a sticky floating navigation menu in WordPress
- What is a sticky menu?
- Pros & cons of sticky headers & menus
- Conclusion: Create your own sticky navigation menu
We all know how ANNOYING it is to scroll from the bottom of the page back to the top just to navigate to a different category or page
Time-Waisting!
That’s why you should implement a sticky menu on your WordPress website and enhance the navigation for your visitors.
User. Experience. BOOSTER.
But you can also add a back to top button to your WordPress site.
How To Create A Sticky Floating Navigation Menu In WordPress
There is a good chance that a sticky floating menu is ALREADY a part of the theme you have or intend to purchase.
(You may just need to activate it manually.)
Most modern websites implement at least a very simple sticky navigation or a scroll menu.
When I was developing themes for PremiumCoding, I always made sure that the scroll menu was minimal, yet useful (with extra social networks in it), and with a beautiful design that matched the website.
And that is the BIGGEST advantage of an already implemented sticky menu in a WordPress theme.
The design will match the rest of the website, so you don’t have to make any extra adjustments.
Unfortunately, some themes still don’t have floating navigation by default.
If this is the case, you will have to use a plugin, and, fortunately, there are many to choose from.
But only one is my favorite.
Add Your Sticky Floating Navigation Menu With a Plugin
There are many WordPress menu plugins to implement the sticky scroll menu on your website.
From very simple and minimal ones to premium versions that can turn your scroll menu into an interactive news provider with images, social networks, and even videos.
You can also create a floating mega menu.
But most of you will want to keep it simple.
At least that’s what I highly recommend from my experience.
So, let’s check the Sticky Menu & Sticky Header plugin that allows you to add any element on your pages as sticky.
This is, by the way, my favorite plugin for adding sticky elements to WordPress sites (not just menus!).
Go ahead, install & activate the WordPress plugin and then head to Settings > Sticky Menu.
Settings are pretty simple, but you must know some HTML and CSS basics to set them properly.
The most important part is finding the ID class of the element that you want to add to the sticky bar.
You can find that with the Inspect button in your browser.
Start by right-clicking on the element (in this case, the navigation menu) and then Inspect.
I usually use Google Chrome, which has the most options and is the most user-friendly.
A popup window will open after you click the inspect button.
Now click the Elements button, and you will see the highlighted link displayed with the CSS syntax in the right column.
In the case of our website, the ID of the element that we need to add to the sticky menu plugin is #header-sticky-wrapper.
This is the string that you then add to the plugin’s configurations.
Save changes and refresh your website to check the cool sticky bar you just created.
If you don’t see the bar, there might be an index issue, where the sticky bar is positioned behind the main wrapper of the website.
If this is the case, go to Advanced settings and set the z-index to a high number. This might solve the issue.
Premium Sticky Navigation Menu Plugin
As you can see from the image below, some of the features are only available in the premium version.
They are currently offering a 50% discount, so if you need a more advanced version of the plugin, now is a good time to purchase it.
While the sticky menu plugin is sufficient for most bloggers out there, some might need a more advanced navigation system with A LOT OF features.
If that is the case, you need UberMenu plugin. It’s the most advanced menu extension ever made for WordPress.
It has many template layouts to choose from and is VERY customizable so that you can adapt it to your website in no time.
With 80,000+ sales (with an average rating of 4.68) on CodeCanyon, it is, without a doubt, the best-selling menu plugin for WordPress and a great choice for any website.
You can use UberMenu for mega menus, drop-down menus, static or dynamic content; you can really use it for anything.
2. Add Your Sticky Floating Navigation Menu Without a Plugin (Using Additional CSS)
Are you reluctant to use a plugin and want to make the floating menu with extra CSS only?
Then you’re in luck because it’s not that very hard to do.
First, you need to get the ID of the menu wrapper (check the instructions above).
In the case of our website, the ID of that element is #header-sticky-wrapper.
Here’s the CSS for the main navigation:
.header-bg {
position: fixed;
top: 0;
width: 100%;
height: 80px;
}
This is just the basic CSS that will make your header sticky.
Please note: The design will stay the same as the design of the original header. This CSS just ensures it’s always at the top when you scroll down the website.
If the menu goes below the content when you scroll, add the z-index parameter to the CSS.
And add the background color in case the navigation is transparent:
.header-bg {
position: fixed;
background:#fff;
z-index:99;
top: 0;
width: 100%;
height: 80px;
}
Bonus: What Is A Sticky Menu?
A sticky menu is fixed navigation that always stays at the top of your website when you scroll down.
It has become a norm in modern web design because of its usefulness.
We should always aim at INCREASING our site’s user experience, and a floating navigation/header contributes to it.
Types of Sticky Headers & Menus
There are usually three types of sticky headers and menus you can choose from: at the top of the screen (most common), left, or on the right side.
Sometimes, but rarely, you will see a floating navigation bar at the bottom of the screen. And if you decide to go with this variation, I suggest you add it only if you have very few menu elements – keep it highly minimal.
- Sticky top menu: This is the type of floating menu that most websites use. It’s great for long pages to display categories, posts, search bar, social media icons, etc. The header is fixed to the top of the screen with free left and right WP sidebars, which you can use to add various widgets.
- Sticky left menu: The second most common fixed menu is one that floats on the left side of the screen. If you go with a sticky sidebar menu/header, choose the left side because that’s where our eyes will look first – not the right side (most of us are used to reading from left to right, that’s why).
- Sticky right menu : Adding a fixed menu to the left side of the screen isn’t practiced by too many websites. And if you go with this one, you can also use the right sidebar to place widgets, even banner ads, while keeping the top and the left side clean and distraction-free.
Note: You may want to check my tutorial on how to add a sidebar menu in WordPress if you’d like to stay away from the more traditional top navbar.
Why Add A Sticky Menu To Your Website?
The most obvious reason is better navigation.
I am old enough to still remember the old HTML websites with the overabundance of content and the endless scrolling when you were searching for information.
It was NOT fun.
That’s why in modern web design, sticky navigation is a standard that you should experiment with.
It’s a good practice that you just must follow.
Pros & Cons of Sticky Headers & Menus
There are many pros and not so many cons when it comes to sticky headers.
Pros
- Fast navigation is the most important reason to have a sticky menu. The research was done by Smashing Magazine, which showed that 100% of users prefer to have sticky navigation even though they don’t know the exact reason why. That shows that (nowadays) we simply expect that sticky navigation is an integral part of any website.
- Beautiful design as it helps fill the content (less empty, aka white space on the website) on today’s big screen monitors with high resolutions. It’s simply easier to design a good-looking website with a sticky navigation bar.
Cons
There aren’t many cons, but one does come to mind.
Mobile navigation is different, and if you have a sticky menu, then you should hide it on the mobile view.
Fortunately, most of the themes and plugins already have the option to turn it off in the responsive mode.
And unless you have a very specific reason why you need it, it should always be HIDDEN in the mobile view.
And even then, the design needs to be adapted so it’s not just a nuisance.
Conclusion: Create Your Own Sticky Navigation Menu
Making sure your website has sticky navigation should be a priority.
We use it on ULTIDA, and our users’ experience is 23% better than it used to be.
Simply follow the steps in this tutorial and ensure that the navigation menu matches the overall design of your website.
Hint: The first thing you should do is double-check your theme settings. Maybe you can activate the floating navigation with a click if it’s built-in.
That’s why you need to take some time and carefully select the elements that you want in the sticky navigation.
Besides the menu, I like adding social icons, a search field, and a logo.
Now stick that menu to the top of the screen like glue!
::
Note: This article was originally published on October 3, 2022. But our team regularly reviews it and updates it with necessary improvements for accuracy.
No Comments