Slim WordPress header+nav with Generatepress

This article will demonstrate a combination of settings and CSS rules to get a slim header. I often think headers and navigation take too much vertical space at the top of the page. The Layout settings in generatepress can’t fix this bit with some CSS we can fix it. This article will aslo demonstrate setting a fixed header + nav.

First you can go to the generatepress Customize panel and choose your colours, fonts, container settings and choose a nice logo and icon. A lot of the options in the Customize panel will overlap with what we can do with CSS. That is ok, the result of your choices in the Customize panel will mostly end up as CSS rules anyway. Wether to use CSS or the Customize panel depends on the use case. Often I find it quicker and easier to work with CSS once I have found the right selectors.

This first CSS rule sets the height of the header using the #masthead id

#masthead{
	height: 35px;
}

This will trim the height of the header significantly. What works or not in your case might depend on your chosen font and font-size in the header, also all margins and padding settings might affect how well your header content fits in the container. Try different fonts, margins, paddings and font-sizes to get a good result.

Next rule removes padding around the title element to allow for a slimmer header

#masthead > div {
	padding: 0px 0px 0px 0px;
}

The next CSS rule sets the height of the nav element, but also paddings horizontally between each menu element. It targets the link element inside a li element inside the ul element that is inside the navigation element.

.main-navigation .main-nav ul li a {
    padding-left: 10px;
    padding-right: 10px;
    line-height: 25px;
}

Just for fun here is some code to place the site logo to the left and make it fixed so it is always visible.

.site-logo{
	
	position:fixed;
	display:inline-block;
	width: 90px;
	margin-left: -4px;
	margin-top: -24px;
	top: 12px;
	left: 12px;
	z-index:1000;
	
}

This also requires us to adjust the padding of the content so the logo doesn’t overlap your text content. This code will work but you should adjust the left padding (the last value) to fit your logo.

#content{	
    padding: 70px 40px 40px 100px;
}