Header wider than content in GeneratePress

GeneratePress is a great theme, lightweight, inexpensive and well structured, but it still lacks some click-through functionality.

GP Premium gives the possibility to adjust the width of the content including its header, but when we want to have a different width between the container (eg: 800px) and the header (eg: 1200px) the thing becomes more complex because we will have to be adjusting different areas of the page to achieve the desired effect.

That’s why we are going to do it using CSS code, easy and practical:

header#masthead .inside-header.grid-container.grid-parent,
nav#secondary-navigation .inside-navigation.grid-container.grid-parent {
    max-width: 1200px;
}

With this snippet added to the additional CSS from the customizer, we will modify the width of the header without having to have all the content with the same size.

If we have activated the fixed menu option we will insert the following code:

nav#sticky-navigation .inside-navigation.grid-container.grid-parent {
    max-width: 1200px;
}

With these two snippets we will have already customized the size of the header/main menu to 1200px, independently of the rest of the content.