Tweak the primary menu in header to align two menu options to the right

Hi there,

can you disable your cache plugin and remove and CSS that you have added to the Primary Nav.

Hi David, ive now done that.

Hi there,

Any specifics you want to replicate from the reference site?

If it's the menus with columns, I believe you can use this:
https://docs.generatepress.com/article/building-simple-mega-menu/

If you simply want to split the menu into something like this: https://share.getcloudapp.com/jkuell4p

Then you can try this CSS:

@media(min-width:769px){
.nav-float-right #site-navigation {
    flex: 1 1 auto;
}

.nav-float-right #site-navigation .inside-navigation.grid-container{
    width: 100%
}

div#primary-menu.main-nav {
    flex: 1 1 auto;
}

div#primary-menu.main-nav li#menu-item-2289 {
    margin-left: auto;
}
}

Hi Elvin,

Ideally I would like to make a website which is similar to their one as I like the design.

Thanks for your suggestions, I have added the space in the menu.

How can I indent the logo so that it is level with the title text underneath it and also bring the menu navigation options down so that they are level with the bottom of the logo please?

Thanks

Ed

Hi Ed,

Try this CSS, I add an media query so that the changes only apply to desktop when the menu is not toggled.

@media (min-width: 769px) {
    .site-logo {
        margin-left: 24px;
        margin-bottom: 8px;
    }
}

Thanks Ying

No problem :)

Hi, I applied your suggestions and it worked however I have just implemented this https://generatepress.com/forums/topic/open-a-drop-down-menu-when-a-user-clicks-on-a-header-menu-nav-option/ and it has broken it.

Please advise on how to fix it?

My website is https://newwebsiteexample.com

Thanks

Ed

Hi Edward,

Since you adjusted the menu item, so the li#menu-item-2289 from the CSS Elvin provided doesn't exist anymore.

You could replace this:

div#primary-menu.main-nav li#menu-item-2289 {
    margin-left: auto;
}

with this:

ul#menu-menu li:nth-child(5) {
    margin-left: auto;
}

In the new CSS, the 5th menu item which is the "sign in" will be move to the right. If you'd like "Pricing" be moved to the right, then simply change the number 5 to 4should do :)

Thanks Ying il do that

Great, you are welcome!

It worked thanks. :-)

You are welcome :)