Don’t Worry, You’re In The Right Place
A lot of these posts were originally on SureFireWebServices.com. So if you found them through search engines or clicking around, this is their new home :). Enjoy!
0

How to do Nav | Logo | Nav on Genesis Framework

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:

Screen Shot 2014-01-24 at 1.38.37 PM

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:

https://gist.github.com/surefirewebserv/aaf48e924fbed3a1e94d#file-gistfile1-php

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:

Screen Shot 2014-01-24 at 1.40.22 PM

We’re getting there though. Right now everything is inside the header. Yay!

Let’s do a bit of styling:

https://gist.github.com/surefirewebserv/aaf48e924fbed3a1e94d#file-gistfile2-css

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:

Screen Shot 2014-01-24 at 1.45.55 PM

Now play with the styles a little bit, the top, 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!

Advertisement
About the Author

What’s UP! This is my site, I write 99% of the articles on here. I’m also the owner of SureFireWebServices.com. I help out a lot of developers and designers getting into the web game. Helping is fun for me, so feel free to ask me any questions! I’ve made courses and have a membership as well to help get you on your feet!

0 comments on How to do Nav | Logo | Nav on Genesis Framework

  1. Ruthie says:

    Wow. I haven’t read this yet, but it came at the right time. I’m creating a site for a client that needs this. Awesome! Thanks!

    1. Jonathan says:

      You’re very welcome!

  2. Mariano says:

    Really nice! Thx

  3. Brittney says:

    This is very helpful. Thank you. What code would I use to get my logo on the left? Also, how do I hide my old navigation bar?

Leave a Reply

Your email address will not be published. Required fields are marked *

Scroll to top