Genesis Tutorials

How to add a top nav bar a la Brian Gardner

I read Brian Gardner’s blog. It’s one of the few that I do. One of the reasons that I bother is that he regularly re-styles it, usually with the latest StudioPress offering.

Anyway, a couple of months ago I noticed that he had a really cool top navigation bar… Screenshot time!

brian gardner wayback

Nice, huh? So yesterday I remembered this and thought, ‘heh, I want a cool top bav too!’.

By the way, his latest doesn’t use a top nav, but a sticky menu, which is a slightly different beast. My mind’s not yet made up re sticky menus. But I digress…

You may be wondering how I managed to access his hold website. The Wayback Machine is the answer. It stores copies of web pages. It’s kind of like a museum for the web. The screenshot is from Feb 2013, when Brian was sporting the Metro magazine theme, which, incidentally, is one of my favs! You can see a nice example of it on Sarah Hoffman’s website A Gutsy Girl.

I am going on somewhat today, aren’t I? Sorry – let’s get on to the tut!

1. Add the top nav

[gist id=5228200]

I was lucky to find this code on pastebin, posted by a guest. Otherwise, I’d have had to write the code myself – god forbid!

Let’s talk about the code. ‘genesis_before’ is the hook . It’s the first structural action hook. The crucial thing here is that it comes before the header. ‘bg_topnav’ is just the name of the function. It doesn’t really matter what it’s called.

‘Echo’ is PHP for print or display. Then we’ve got a div id and some spans, which we’ll talk more about in in step trois.

I nearly forgot to say: you need to add this code to your functions.php!

2. Make it your own

The code as is contains links to Brian’s site – you probably don’t want to direct your visitors there! So you just need to swap out Brian’s links for your own and change the titles. Here’s my finished code:

[gist id=5228244]

3. Style, style, style

Crack open your stylesheet, because we need to add a bunch of code. Brace yourselves, people, for this isn’t the prettiest code you’ll ever see:

[gist id=5228272]

The important thing is, it works!

Obviously, unless you’re using the Modern Portfolio theme, as I am, you’ll need to, at the least, change the colors. But that should be it, really.

I should probably comment on some of this code, shouldn’t I? Explain what’s going on? OK then, you win.

#topnav is our topnav id that we echoed in our functions.php. This is where we style it. We give it a background color to match our theme, some padding so it’s not so skinny, quite a small font size.

Text-decoration:none remove the underlining that you get by default on links.

There’s a nice little illustration of how to use spans here. Spans are used for styling groups of inline elements, like words within a paragraph (which is a block level element). Spans can be contrasted with divs, which are used to style groups of block level elements, like paragraphs. The a:before content thing is pretty coolio. Here it allows us to insert vertical bars before each span.right, except the first one, which has its own blank content.

That’s pretty much it, folks!

Any questions, the comments are your friend. Be sure to post a link to show off your new top nav!

Leave a Reply

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