Resize header in Sample Theme

[odnt]

I want to reduce the header width in the Sample Theme so the site title and navigation are positioned similar to the Breakthrough Pro Theme.

Any suggestions?
Thanks!

https://www.rickpaulson.com/webdev/custom/

[Terry]

Morning odnt,

Do you want it to match the content width on larger screens?

[odnt]

I'd like to match the proportion, as in a percentage value. For example, 80 percent of the window on any device.

[Terry]

OK, to make this change requires changing the css. Depending on your comfort level, you can ftp the file, change and upload or make the change in the Customizer => Additional CSS.

Let's move forward making the change in the Customizer...

If you want the change to be applied to all screen sizes and centered, add the following after navigating to Customizer => Additional..

.site-header .wrap {
		width: 80%;
	margin: auto;
	}

If you'd like it only applied to larger screen sizes (still centered), wrap it in a media query...

@media only screen and (min-width: 960px) {
.site-header .wrap {
		width: 80%;
	margin: auto;
	}
}

Hope this helps!

[odnt]

Thanks Terry! That works well. I had to resize the nav, but that's simple stuff.
Cheers,
-Rick

[Terry]

Great Rick, so glad it worked for you.

Please mark this thread as resolved.

[Author]

Posts