Community Forums › Forums › Archived Forums › Design Tips and Tricks › Minimum Pro – Move Primary Nav below Header
Tagged: minimum pro, Move Primary nav
- This topic has 12 replies, 3 voices, and was last updated 10 years, 3 months ago by nutsandbolts.
-
AuthorPosts
-
December 14, 2013 at 2:24 pm #79104ellenstevensMember
Using: Minimum Pro
How can move the Primary Nav from below the site tagline to below the header?
ellen
http://www.ellenstevens.com/testDecember 14, 2013 at 9:07 pm #79159nutsandboltsMemberFind this in your functions.php:
//* Reposition the primary navigation menu remove_action( 'genesis_after_header', 'genesis_do_nav' ); add_action( 'genesis_after_header', 'genesis_do_nav', 15 );
And comment it out by changing it to this:
//* Reposition the primary navigation menu // remove_action( 'genesis_after_header', 'genesis_do_nav' ); // add_action( 'genesis_after_header', 'genesis_do_nav', 15 );
That should allow the nav to move back under the header where it belongs.
Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+December 14, 2013 at 10:28 pm #79178Sridhar KatakamParticipantDecember 14, 2013 at 11:55 pm #79185ellenstevensMemberHalfway there.
1) Commenting out the code in function.php removes the nav menu completely.
2) If I add the following to CSS, it places the menu below the header: .nav-primary {
margin-top: 62px;
margin-top: 6.2rem;
3) However, I need the nav menu to stay in place when the screen rolls up. Currently, it just disappears.Any thoughts?
December 15, 2013 at 12:42 am #79198nutsandboltsMemberIf you change the padding to 85px and 8.5rem, the nav will show at its full height.
To make it fixed like the header, find this in your stylesheet:
.nav-primary { background-color: #000042; }
and change it to this:
.nav-primary { background-color: #000042; position: fixed; width: 100%; }
Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+December 15, 2013 at 12:49 am #79201ellenstevensMemberPerfect! Thank you so much.
es
December 15, 2013 at 7:42 pm #79326ellenstevensMemberWait! Something has changed.
1) When I added the header logo, a gap appeared between the Header and Nav Bar. Now the background image is showing up between them. Any thoughts?
2) Is there a way to shorten the height of the background image shown?
December 15, 2013 at 8:20 pm #79331nutsandboltsMemberOkay, now that your image is in place, switch back to the 62px and 6.2rem for padding - that will get rid of the gap. It was good for the text but the logo is a different height.
Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+December 16, 2013 at 4:43 pm #79568ellenstevensMemberThis is looking better! One more issue, though...
The fixed nav is fine, except when viewed on a smaller screen (for example, vertical iPad or phone). I'm sure this is affected by media inquiries/screen size. How do I remedy this?
ellen
December 16, 2013 at 4:54 pm #79571ellenstevensMemberAnd one more... 🙂
How do I add padding-top to interior pages? Because of the raised fixed nav menu, titles for interior pages are covered by the menu bar. Any ideas?
Thanks!!
December 16, 2013 at 6:58 pm #79602nutsandboltsMemberOn the media queries, add a rule like this to take away or adjust the top margin on the nav:
.nav-primary { margin-top: none; margin-top: none; }
It may need to be adjusted individually at each screen size.
To fix the pages, increase the padding-top on .site-inner.
Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+December 17, 2013 at 2:06 am #79697ellenstevensMemberAt first this seemed to work, but something still isn't right. When I view the site on an iPad (landscape), or on a laptop and shrink the browser size, the primary nav menu disappears.
I'm not sure where to fix it.
Any thoughts?
Thanks for your help and patience!!
December 17, 2013 at 11:28 pm #79875nutsandboltsMemberRight now I'm not seeing the nav at all, even on my computer. You may need to go back through this thread and start undoing things we've done to see if you can find the problem. I might have asked this already, but is there a caching plugin installed? It seems like I always see things on a delay.
Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+ -
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.