Archived topic

Create a Split Primary Navigation Menu

5 replies · Started by shaniacking on September 29, 2022

Viewing posts 1–6 of 6

September 29, 2022 at 10:45 pm #2358388

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.

September 30, 2022 at 5:06 am #2358680

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

September 30, 2022 at 5:28 am #2358717

Please see below.

September 30, 2022 at 11:40 am #2359193

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

September 30, 2022 at 2:21 pm #2359302

Ying,

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

September 30, 2022 at 3:59 pm #2359335

You are welcome :)

This archived topic is closed to new replies.

Start building better websites today.