GeneratePress Left Navigation with Button on Right

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;
}