One of the best parts about the WordPress Standard Theme is the simple and yet powerful navigation bar that contains whatever you want. It has the capacity to contain eight preset social media icons or any custom buttons you want to include, the automated category navigation, or any endless number of custom navigation links that you create. At the same time, it would cool to make our website on all platforms (desktop, mobile) into an application looking format, simply by adjusting the location of the navigation bar.
Before we continue, here are the specs we are currently working with in PHP, WordPress, and Standard Theme.
- PHP 5.4.7+
- WordPress 3.4+
- Standard Theme 3 with Child Theme Kit
It should be noted that while this is set up to make your website look great for visitors, you will have conflicting issues with the WordPress admin bar when you are logged in. There are solutions out there for moving either the admin bar or you could figure out how to adjust the navigation bar when logged in. Either way, that is for another time and place.
Now, we are wanting to take the default navigation bar that has already been configured with the social media buttons and navigation links within it so that it becomes fixed at the top of the page and stays there, even when we scroll down the website.
Here is how the page loads up:
And as you scroll down, the menu remains in place:
😀
Let’s assume that you are properly using Standard Theme with the Child Theme Kit and have already set it up. Go ahead and open the kit’s style.css file. Place the following code in any and all @media platforms that you would like to have your navigation contain that application look.
#menu-above-header { position: fixed; width: 100%; z-index: 9999; }
That’s it!
You may have to adjust your theme a bit if your header/brand logo gets in the way, but now you have a new look to your blog. The navigation will always be present at the top of the page, no matter if they are at the bottom of the page commenting or at the top when the page loads up. This means more clicks and visits to your social media accounts, too!
And if you’re not using the most awesome WordPress theme on the planet, you can still play around with these CSS fundamentals to get the same look and feel, depending on what theme you’re running.
SXIOPO
Alfons says
I was looking for a sticky menu plugin – LOL – when it’s just one line of CSS haha
thanks man!! 🙂
btw, great picture, red genie … awesome!
uvas says
CAn you explain where exactly put that line in the code? 😀
KPCTA says
Great post, thanks.
But I have problem, my menu is not by default on top of site, it is under logo, so, when i scroll down it stay on same position.
How to move it on top when I scroll down and stay there.
Thanks in advance.
Deenar says
My sticky menu is not working with that code.Is that really one line simple code or i have to do js work for getting that?? Please reply.
Thanks
Eric Dye says
Try this?
.navbar-fixed-top {
position: fixed;
}
anon says
big deal! and you need to have an entire page for this?