I’ve seen this trend happening in a few places. I’ve had to do it myself a couple of times. It’s the ol’ centered logo look. If you’re not sure what I’m talking about, just take a look at the featured image =).
I’m going to show you in this tutorial how to accomplish that same effect for your site. I’m going to put it in its most basic form so please be advised that depending on your navigation, logo, etc., you may have to tweak the css a bit.
Let’s get started.
I have this to start with:
Gross, I know.
Moving things around.
The [sf-aff uri=”genesis” class=””]Genesis Framework[/sf-aff] (aff) has 2 locations for navigation. One is called the Primary Navigation and is directly underneath the header. The second is the
.sub-menu or Secondary Navigation and is directly underneath that.
The key here is Genesis also has a Right Header widget area where you can place a custom navigation widget! That’s what we’re going to do.
In addition, we want to move the Primary Navigation directly into the header, instead of underneath it.
To do that we’ll use the following code in our functions.php file:
We’re basically removing the navigation from the
genesis_after_header hook, and placing it in the header with a priority of 5.
As of now, your site probably looks a bit of a mess. Kind of like this:
We’re getting there though. Right now everything is inside the header. Yay!
Let’s do a bit of styling:
Now this is it’s most basic and simplistic form of styling that will get this to work. Every theme is different and will need to be adjusted, BUT, this is where you need to be.
Check it out:
Now play with the styles a little bit, the
padding, etc., and pretty sure you’ll have a complete header with the logo in the middle, nav on the left, and nav on the right.
Hope you enjoyed this tutorial!