One of my sites got a facelift, and mid-stream I thought “This site would be the perfect place to have one of those floating nav bars.” You know, like how Twitter has this?
Well guess what? It was easy! Presuming you already have a Primary Navigation Menu (like the one I have here with the Genericons), it’s two steps. Of note, you don’t have to do this in your functions.php, but since this will be a part of your theme, it probably belongs there. I tested, and it works in an mu-plugin as well. I should also point out that there are some official directions in the My.StudioPress.com site, but I didn’t use them. I like making it hard.
Step One: Put the nav menu above your header
This one was super easy, it’s even in one of the official Genesis Snippits under Navigation Menus. Put this in your functions.php file:
//* Reposition the primary navigation menu remove_action( 'genesis_after_header', 'genesis_do_nav' ); add_action( 'genesis_before_header', 'genesis_do_nav' );
That puts the primary navigation menu above the header. If you want to use the secondary menu, it would be genesis_do_subnav but you can sort that out.
Step Two: Make it stick
This is pure CSS, so into your style.css goes:
.nav-primary {
position:fixed;
z-index:99;
top: 0;
width: 100%
}
At first I didn’t add in the top: 0; but I found out that without it, a fixed position meant my header was suddenly under the navbar all the time. Oops. So I moved that to on, after spending an hour trying to math out the permutations with margins, and ended up with my navbar under the WordPress toolbar! Don’t worry, CSS to the rescue!
body.admin-bar .nav-primary {
top: 28px!important;
}
body.admin-bar .site-container {
margin: 30px 0 0 0;
}
This simply says that for the body class of admin-bar, bump everything down by 28 pixels.
Step Three: Return to Top
I know, I know, I said two steps. This one is optional. I made a menu item called ‘Top’ with a link of #top and a CSS label of ‘top’ and it looks like this:
Now since I called this menu ‘primary’ and I’m using Genericons, I made this my CSS (keep in mind .nav-primary would also work):
.menu-primary top {
float: right;
}
.menu-primary li.top a {
font-size: 0;
}
.menu-primary li.top a::before {
vertical-align: middle;
padding: 0 5px 0 0;
font-family: 'Genericons';
content: '\f435';
}
This gives me a happy little top arrow that, when clicked on, takes people to the top. If you want to mess with colors, remember that to be specific for just the before calls, it’s a:hover:before (the pseudo-element is last).
