Lifestyle Pro – Eliminate whitespace between header and primary navigation

[gadfly1974]

First, thanks to David Browne @davidbrowne_ for fantastic advice on my wife's header image. It looks beautiful on a variety of desktop and mobile devices!

I'd like to complete two last small adjustments to the navigation bar. I'd like to make it full-width, and I'd like to eliminate the whitespace between the header and the navigation.

Any suggestions?

http://amleibowitz.com/

[Abland]

Hi, gadfly1974,

Try this:

.site-container {
    padding-top: 0px;
    padding-left: 0px;
    padding-right: 0px;
}
.site-inner {
    padding-left: 3.6em;
    padding-right: 3.6em;
}

If needed use !important;

[ᴅᴀᴠɪᴅ]

No problem 🙂

OK there are two ways to do this.

If you are planning on only using the one menu on your site, then the easiest way (assuming you copied my code exactly) is to just the menu to the Primary location instead of the Secondary. You can just do this in the menu option. This is because we already moved the Primary menu outside of the site-container with the last code i gave you. The only thing you would need to change in that code is the priority number of the menu to make sure it comes after the header.

So with this line..

add_action( 'genesis_before', 'genesis_do_nav', 2 );

Change the number 2 to 18

If, you wanted to have two menus, or it is important that you leave this menu as the secondary, then there is another way. You can move the secondary menu outside of the site-container also.

So for this you would need to add..

//* Reposition the secondary navigation menu
remove_action( 'genesis_after_header', 'genesis_do_subnav' );
add_action( 'genesis_before', 'genesis_do_subnav', 20 );

It automatically solves the white space problem.

For future reference check out this visual guide to the genesis hooks

You can see the names of the hooks and where they are. All we have done is unhook them from where they were, and added them onto new hooks.

---

I love helping creative entrepreneurs build epic things with WP & Genesis.

Follow on Twitter

[gadfly1974]

Thanks Abland! This code eliminated the whitespace between the header image and the navigation bar.

[gadfly1974]

David, I'm working through your code right now to get the nav bar full-width. Thanks for the quick reply

[Abland]

You're welcome - you may need to reduce the padding-left and padding-right on .site-inner - in IE I just noticed the sidebar drops below the content area ... maybe 3.2em or a bit less

[gadfly1974]

So one last question. How do I get the navigation menu full-width instead of cutting off at the edge of the background tile image? Is this possible?

My bad for asking two different style questions in the same thread. Sorry.

[gadfly1974]

Thank you for checking that, Abland. I've made that adjustment.

Now I'm struggling on my iPhone, though. It's rendering much too narrowly. I'll keep playing around with the settings.

[gadfly1974]

David, I added your code to reposition the secondary menu. Because of the way my designer created her code, this was the most elegant solution.

Abland, thank you for your help as well. I have a better understanding of how to work with margins in CSS now.

Thank you both!

[Abland]

Glad you got it - I wasn't thinking screen width at first - David was 🙂

[Author]

Posts