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.
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.
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!
No Comments