Community Forums › Forums › Archived Forums › Design Tips and Tricks › Lifestyle Pro – Eliminate whitespace between header and primary navigation
Tagged: header, lifestyle_pro, navigation, whitespace
- This topic has 9 replies, 3 voices, and was last updated 10 years, 6 months ago by
Abland.
-
AuthorPosts
-
August 4, 2014 at 6:37 pm #117070
gadfly1974
MemberFirst, 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/August 4, 2014 at 6:51 pm #117076Abland
MemberHi, 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;
August 4, 2014 at 6:58 pm #117079ᴅᴀᴠɪᴅ
MemberNo 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.
August 4, 2014 at 7:10 pm #117085gadfly1974
MemberThanks Abland! This code eliminated the whitespace between the header image and the navigation bar.
August 4, 2014 at 7:15 pm #117086gadfly1974
MemberDavid, I'm working through your code right now to get the nav bar full-width. Thanks for the quick reply
August 4, 2014 at 7:16 pm #117087Abland
MemberYou'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
August 4, 2014 at 7:20 pm #117090gadfly1974
MemberSo 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.
August 4, 2014 at 7:26 pm #117092gadfly1974
MemberThank 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.
August 4, 2014 at 7:42 pm #117098gadfly1974
MemberDavid, 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!
August 4, 2014 at 7:47 pm #117100Abland
MemberGlad you got it - I wasn't thinking screen width at first - David was 🙂
-
AuthorPosts
- The topic ‘Lifestyle Pro – Eliminate whitespace between header and primary navigation’ is closed to new replies.