[Resolved] Create a Split Primary Navigation Menu

[shaniacking]

Hello,

I would like to create a split primary navigation menu like this website:https://fizzle.co/. Specifically, I want the logo to remain on the farthest left with 4 menu items on the left next to the logo and 3 menu items to the farthest right of the primary navigation menu. I tried adding the “menu-item-float-left” to the CSS Class, but it didn’t change.

[Fernando]

Hi Shania,

To begin with, can you go to Appearance > Customize > Additional CSS and remove these?:

.site-branding,
.site-logo {
	position: absolute;
	left: 50%;
  transform: translateX(-50%);
	z-index: 200;
}

.main-navigation .menu-item-separator a {
	font-size: 0;
	background: transparent !important;
}

#site-navigation {
	float: none;
	width: 100%;
}

Then, can you provide the link to the site in question?

You may use the Private Information field for this: https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

[shaniacking]

Please see below.

[Ying]

Try this CSS:

@media (min-width: 951px) {
    nav#site-navigation, div#primary-menu {
        flex: 1;
    }
    .main-navigation .main-nav>ul {
        justify-content: space-between;
    }
    .main-navigation .main-nav > ul > li:nth-child(4) {
        margin-right: auto;
    }
}

[shaniacking]

Ying,

You’re amazing! That worked. Thank you!!!!

[Ying]

You are welcome 🙂

[Author]

Posts