Customizing generatepress header, navigation and colours

This article will walk you through how to adjust the generatepress theme to better suit your projects design profile.

Contents of this article:

Why Generatepress

Create, steal or extract a colour theme

Adjusting colours in generatepress

Adjusting header & navigation in generatepress customize menu

Adjusting header & navigation further with CSS

Set header background image with CSS

Further reading about CSS – Inspector and links to tuorials

Why Generatepress

The generatepress theme is very lightweight and very flexible in how it allows different layouts. It works well with the most popular page builder (elementor) and is overall well suited for customization. You don’t have to use it for your final project but at least give it a try. You can always switch back to your favourite theme after trying generatepress.

Make, steal or extract a colour theme

If you have made your own colour theme make sure to use it as part of your web page identity. If you haven’t made a color theme (yet?) you can steal an existing colour theme or extract one from an image. Both links go to color.adobe.com.

Adjusting colours in generatepress

In order to go to the generatepress colour menu choose:

Appearance > Customize

Wait for the ‘grey’ customize menu and choose:

>Colours

Use the global colours! This makes it easy to adjust colours later without setting the colour for every individual element. You can find out more about generatepress global colors on the generatepress website. A short explanation is that global colours allow you to set a few colours (from a profile / theme) that will be applied to a lot of elements across your site. This is the equivalent to using CSS variables.

Adjusting header & navigation in generatepress customize menu

You can adjust the layout of the elements inside the header. You can set the size of the logo, how the logo and site header go together, you can place elements left, right center etc.

Do more with CSS

CSS allows us to further make visual adjustments that can’t be done with a theme’s menu. Mastery of CSS will allow you to have full control over layout and visual presenations of a website.

Adjusting the navigation with CSS

I still find the header + navigation a bit too tall. The following CSS makes three adjustments to the page navigation. It sets padding left and right. This allows you to adjust the spacing between elements, and by adjusting left and right values you can also decide wether to have less or more space before the first navigation element. A high padding left value will add more space before the first navigation element.

The line height setting adjusts the height if the entire navigation. A value of 28px makes the navigation a bit slimmer.

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

copy paste this into your CSS panel to try it yourself.

You can also add a border-top to separate the navigation from the header:

.inside-navigation{
	border-top: 1px solid white;
}

Setting a header background image with CSS

A background image in the header allows a lot of control over the page visuals. For a header background image I reccomend s very wide (2560px) and not very tall (160-260px?) image. You can consider using an image with transparency and no background colour for simpler colour management in the future (can avid updating the background image with colour changes).

For this background I mage a 2560 x 200 px image in illustrator with white circles sprayed randomly over the image. You can download that image here and try it yourself:

You can use any image of course. The invisible one above has can be used to try working with a very wide image that uses transparency. After you download, upload it to your own media library. Once uploaded click on the file in the media library. You should get a dialog box called ‘attachment details’. Locate the ‘url’ of the image. This will give you the last part of the pictures unique url. It will look something like this:

/wp-content/uploads/2023/03/headerShape_G.png

This is only the last part of the url. You need to place the url to your domain in frint of that, so in my case that makes the complete url look like:

https://gaute.azurewebsites.net//wp-content/uploads/2023/03/headerShape_G.png

Make your own complete url. You will need it to set the headers background image with CSS.

Here is the CSS code that sets a the background image on the header:

#masthead{
background-image: url("https://gaute.azurewebsites.net/wp-content/uploads/2023/03/headerShape_G.png");
background-position: center;
background-repeat: no-repeat;
}

CSS for adjusting text omn a full page template

.full-width-content .container.grid-container .entry-title, .full-width-content .container.grid-container p, .full-width-content .container.grid-container h1, .full-width-content .container.grid-container h2, .full-width-content .container.grid-container h3, .full-width-content .container.grid-container h4, .full-width-content .container.grid-container h5, .full-width-content .container.grid-container h6, .full-width-content .container.grid-container h7, .contain{
	margin-left: 20%;
	max-width: 600px;
}

@media screen and (max-width: 550px)
	{
		.full-width-content .container.grid-container .entry-title, .full-width-content .container.grid-container p, .full-width-content .container.grid-container h1, .full-width-content .container.grid-container h2, .full-width-content .container.grid-container h3, .full-width-content .container.grid-container h4, .full-width-content .container.grid-container h5, .full-width-content .container.grid-container h6, .full-width-content .container.grid-container h7, .contain{
	margin-left: 4%;
	margin-right: 4%;
}
}

For adding padding over the site heading:

#page{
	padding-top: 2em;
}