Modern Navigation Layouts for GeneratePress

Simple snippets of CSS to modernize the GeneratePress navigation bar!


Modern layouts for GeneratePress menus

Kyle Van Deusen

OGAL Web Design owner and WordPress educator helping businesses succeed with design, development, and marketing since 2003.

Filed Under: Tutorials

Your website’s navigation is arguably one of the most important aspects of your entire website.

Get it right, and users can spend more time on your website navigating from page to page intuitively.

But if done wrong — a user will leave quickly. The idea of “learning” how to use your website will not appeal to anyone.

The options inside the customizer to lay out your header in GeneratePress will suffice for basic layouts; navigation on the right, navigation on the left, centered navigation, etc.

But there are a few common layouts that you just can’t do with the customizer settings alone.

Left navigation
Left navigation
Left navigation with last item on the right
Left navigation with the last item on the right
Left navigation with last item styled as a button on the right
Left navigation with the last item styled as a button on the right
Left navigation with two last items on the right
Left navigation with the two last items on the right
Center-aligned navigation with CTA's on the right
Center-aligned navigation with CTA’s on the right

The last two examples are extremely common for product/software companies — and for good reason. These layouts make the navigation section of the website extremely clear, giving distinction to its branding, navigation, and calls to action.

In this tutorial, I’m going to walk you through how to create these different layouts so you can achieve some more modern header designs.

Basic Setup

Inside your GeneratePress (or GeneratePress Premium) Customizer settings, make sure you have the following:

  • Layout > Primary Navigation
    • Navigation Location: Float Right

Now, we need just a little bit of CSS to lay the foundation of all the configurations we’ll try out.

Inside 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%;

With this in place, we can start to explore the different configurations.

At this point, your navigation should look something like this:

A screenshot of what the navigation looks like in progress.

It’s already starting to take shape, but now we need to play with some different configurations to make things a little more interesting!

Left Navigation, Last Item on Right

Yes, naming things is hard — so I’ve just tried to go with the most descriptive titles possible.

In other words, this:

Now the last menu item has moved to the right side of the navigation

As you can see, the last menu item has now moved to the right side of the container, separate from all its navigation item friends.

To achieve this, you just need to add the following CSS to what you’ve already added:

.main-navigation li:last-child{
	margin-left: auto;

It’s already looking nice — but I think we need to draw some more attention to that Buy Now link and turn it into a call-to-action.

Make the Last Menu Item a Button

In order to draw some more attention to the last menu item, let’s try styling it like a button — so that it looks more like this:

Now the last item is styled like a button.

Yes! That’s much better!

To do that, just add the following CSS as a starting point (you’ll want to customize all this CSS to match your branding):

        /* Natural State */
.main-navigation .main-nav ul li:last-child a{
	color: #fff;
	background-color: #000e26;
	border-radius: 4px;
	/* Hover State */
.main-navigation .main-nav ul li:last-child a:hover{
	color: #fff;
	background-color: red;
	border-radius: 4px;

But, looking at it, it seems like the “Log In” menu item should be grouped over there with the buy now button since they are closely related.

Left Navigation with Last 2 Items on the Right

In order to achieve this, we need to go back and edit some of the CSS we already wrote.

Find this line in your CSS:

.main-navigation li:last-child{
	margin-left: auto;

And replace it with this:

.main-navigation li:nth-last-child(2){
	margin-left: auto;

And voilà — look what we have now!

Now the last two items are on the right.

This is looking great. But, is there anything else we could try?

Center Align Navigation with Button on Right

Sometimes, when you have a text-based logo, the navigation on the left doesn’t look great. The logo and navigation items blend a little too much, and they need some separation.

So what about center aligning the navigation while keeping the logo on the left and the button on the right? Yep, we can do that!

All you need to do is add one more line of CSS

.main-navigation li:first-child{
	margin-left: auto;

At this point, your navigation should look more like this:

Center aligned navigation menu items

What about tablet and mobile views?

If you’ve already previewed your site on tablet and mobile, then you’ve already seen there are some issues.

Thankfully, these are easy to fix with our good friend; the media query!

Just before any of the CSS you entered from this tutorial, add the following line:

@media (min-width: 1025px) {

And after the last bit of CSS from this tutorial, add this line:


Now the entire setup we wrote is confined to only affecting the desktop layout (I tend to swap to the hamburger menu for tablet and mobile, which works best in 99% of cases).

Wrapping Up

While some themes give you more options out of the box (and some might be able to achieve the layouts we created in this post), but with all those options comes more settings to keep up with and extra code “baked in” to your site that you might never use.

That’s one thing I love about working exclusively with GeneratePress.

You are given the foundation that works in 90% of cases, and with just a few little tweaks you can accomplish any layout you dream up — all without bogging down your site with extra code from all the bells and whistles.

Just what you need, and not a thing more — that’s the key to performance.

If you need any help with your GeneratePress site (or are looking to move to GeneratePress), then don’t hesitate to reach out.

I offer a “convert to blocks” service that can drastically speed up your site and make it easy to manage using GeneratePress and GenerateBlocks.

More Resources & Insights to Help Grow Your Business

We believe informed website owners make better decisions — so we are dedicated to providing ongoing education to help you succeed online!

Graphic illustration of a red lighthouse with a yellow window, set against a blue oval background filled with light and dark blue stripes, and flanked by two white clouds.

A Comprehensive Guide to Understanding Google Lighthouse Reports

Unravel the mysteries of Google Lighthouse test reports with this comprehensive guide covering Performance, Accessibility, SEO, and Best Practices.

A laptop on a desk showing the Fathom analytics dashboard

How to use Fathom to understand your website analytics

Fathom Analytics is a guilt-free Google Analytics alternative that complies with data privacy laws. Here’s how to use Fathom’s web analytics and metrics.

A digital dashboard showing four green circles each marked '100,' labeled performance, accessibility, best practices, and seo, indicating perfect scores in each category.

How to Convert Your Website to Blocks

Learn how to convert your website from an old, outdated page builder to a lightning-fast block-based website!

Most Websites Fail!

Let me help you avoid the mistakes that doom most projects before the first pixel is ever published!