Move Menu To Below Header

Hi there,

Please add the CSS below to your site via the customizer in Appearance > Customize > Additional CSS.

It should move the menu below the header on desktop screens. If it doesn’t, please post a url to your site.

Please note: the css uses Flexbox, which older browsers may not support, but it will work for ~97.7% of visitors.

@media screen and (min-width: 1281px) {
	.site-header {
		display: -ms-flexbox;
		display: flex;
		-ms-flex-direction: column;
		    flex-direction: column;
	}

	.site-branding {
		display: -ms-flexbox;
		display: flex;
		max-width: 100% !important;
		-ms-flex-pack: center;
		    justify-content: center;
	}

	.main-navigation {
		float: none;
		max-width: 100%;
		text-align: center;
	}
}

The css I posted was based on the theme demo – it would place the menu below the title or logo.

It won’t work for your site because you’re trying to place the menu beneath a customer header image instead.

To move the menu below the header image, I think you’d need to use child theme due to the way the html is constructed:

– create a child theme
– make a copy of the header.php file from Skecth in the child theme
– move the php for the menu to below the code for the header image
– position the menu with css
– activate the child theme

I created a basic child theme you could use to get started, but you’ll need to tweak it:

https://github.com/GaryBairead/sketch-child

Download link:

https://github.com/GaryBairead/sketch-child/archive/master.zip

• This reply was modified 9 years, 1 month ago by Gary Bairead. Reason: typos