How to move menu under header image with Going Green Child Theme

[kradke]

Can someone please give me some advice on how to move the menu underneath the header image in Going Green Pro? I will take the site off maintenance mode now. I need to move the menu and shorten the green background so it does not got across the whole width of the page, just as wide as the content area. Any help would be appreciated.
thank you

http://www.krcreativetesting.com

[Marc]

Once again to Brad Dalton - your answer is probably here -
http://wpsites.net/wordpress-tips/move-genesis-nav-menu-before-or-after-header/

---

Resultz Digital | Websites, search marketing services and consulting for small business.

[kradke]

I read the article and removed this from functions.php

//* Reposition the navigation
remove_action( 'genesis_after_header', 'genesis_do_nav' );
remove_action( 'genesis_after_header', 'genesis_do_subnav' );
add_action( 'genesis_before_header', 'genesis_do_nav' );
add_action( 'genesis_before_header', 'genesis_do_subnav' );

That moved the menu down below behind the content container, not below the header and above the container like I was trying to do. Should I have added a different function in it's place?

Thank You,
Katie

[Genesis Developer]

After removing above the code you need to modify the CSS little bit. Then it will display at proper place.

---

Download Genesis Featured Posts Combo Widget | Simple Grid Layouts Plugin for Posts, CPTs and terms
You can request new tips/help.

[kradke]

Modify the CSS as in margins? thanks

[Genesis Developer]

yes. margin, padding etc.

---

Download Genesis Featured Posts Combo Widget | Simple Grid Layouts Plugin for Posts, CPTs and terms
You can request new tips/help.

[kradke]

Would you possibly be able to look at it http://www.krcreativetesting.com

I put this style in and it didn't help.

.nav-primary {
margin-top: 63px;
}

[Genesis Developer]

Modify your style.css file:

Line no 1014 : replace margin-top: 63px to margin-top: 5px

Line no 820: replace padding: 40px 0 200px to padding: 40px 0 20px;

Line no 418: replace margin: -160px auto 0 to margin: 30px auto 0

Now you'll get a good shape

---

Download Genesis Featured Posts Combo Widget | Simple Grid Layouts Plugin for Posts, CPTs and terms
You can request new tips/help.

[kradke]

Thank you! That helped tremendously. I just changed one of the values a bit and got the menu where I wanted it to be positioned.

Katie

[kradke]

So I had the menu moved where I wanted it and now it is not showing up on mobile devices. It looks great on a computer screen. Would someone mind taking a look? http://www.krcreativetesting.com

[Sridhar Katakam]

Add this in child theme's style.css:

@media only screen and (max-width: 1023px) {

	.site-header {
		padding-bottom: 0;
	}
	
	.site-inner {
		margin-top: 0;
	}

}

---

Genesis Tutorials | Follow me on Twitter

[kradke]

I added that in the child theme style and the menu still drops down behind when the screen in smaller than 800 some pixels wide.

[Sridhar Katakam]

Looks fine to me.

http://cl.ly/image/0K1u3a0i0L3m

I checked in my mobile as well.

Can you try doing a hard refresh?

Ctrl + F5 in PC
Cmd + Shift + R in Mac.

---

Genesis Tutorials | Follow me on Twitter

[Author]

Posts