Minimum Pro – Move Primary Nav below Header

[ellenstevens]

Using: Minimum Pro

How can move the Primary Nav from below the site tagline to below the header?

ellen

http://www.ellenstevens.com/test

[nutsandbolts]

Find 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+

[Sridhar Katakam]

Follow http://sridharkatakam.com/moving-primary-navigation-tagline-header-minimum-pro/

---

Genesis Tutorials | Follow me on Twitter

[ellenstevens]

Halfway 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?

http://www.ellenstevens.com/test

[nutsandbolts]

If 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+

[ellenstevens]

Perfect! Thank you so much.

es

[ellenstevens]

Wait! 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?

http://www.ellenstevens.com/test

[nutsandbolts]

Okay, 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+

[ellenstevens]

This 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

[ellenstevens]

And 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!!

[nutsandbolts]

On 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+

[ellenstevens]

At 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!!

Home

[nutsandbolts]

Right 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+

[Author]

Posts