The options inside the customizer to layout your header will suffice with most layouts.
Navigation on the right, navigation on the left, centered navigation, etc.
But there are a few common layouts (which you’ll see in this post) that you just can’t do with the customizer settings alone.
In this tutorial, I’m going to walk you through a few different layouts so you can achieve some more modern header designs.
Basic Setup
To lay the foundation, we need just a little bit of CSS to get things started.
Inside of your Customizer > Additional CSS or your child theme, add the following CSS:
.nav-float-right #site-navigation {
margin-left: 0;
}
.main-navigation {
width: 100%;
}
#primary-menu {
width: 100%;
}
I’m not sure what you call this style header layout — but it’s one I really love and you see quite a bit.

Unfortunately, out of the box, you’re not able to set up a menu like this with GeneratePress or GeneratePress Premium.
However, like with most things, a pinch of CSS will get everything working just fine.
Use the following CSS inside of your child theme or inside the Customizer > Additional CSS to adjust your header layout:
@media (min-width: 1025px) {
.nav-float-right #site-navigation {
margin-left: 0;
}
.main-navigation {
width: 100%;
}
#primary-menu {
width: 100%;
}
.main-navigation li:last-child{
margin-left: auto;
}
/* Only use the CSS below if you want to style the last item like a button (where you'll likely want to add your own styles). Otherwise, you can remove it. */
.main-navigation .main-nav ul li:last-child a{
color: #fff;
background-color: #000e26;
border-radius: 4px;
}
}
Note that this entire snippet is wrapped in a media query that only allows it to work on the DESKTOP view (not tablet or mobile).
What if you want to center-align the text links, like this?

Pretty simple! Just add the CSS below to what was provided above (ensuring that it remains inside of the media query):
.main-navigation li:first-child{
margin-left: auto;
}