Align Desktop Menu Items left and right

Hi there,

Try using this method here:
https://docs.generatepress.com/article/navigation-as-a-header/#basic

Then add menu-item-float-right to the "Start Here" and "Free Dating Ebook" menu items.

Might need a bit more CSS tweak but we can take a look after the above is done.

That works great - the only problem is that my search Icon is now on the left the 2 Float-Right menu items (see screen shot)
https://www.screencast.com/t/XDn86zcEyv

Is there any way to shift it at the far right of the menu again?

Thanks

I see that you are already using some CSS to shift things around.

Can you remove them so I can see if I can provide a better solution?

Yeah - my css is a bit of a mess. I have removed all the stuff that effects the menu so you should have a clean slate. Here is the stuff I removed in case you are interested:

/* Logo and Hamburger Hack*/

.main-navigation .navigation-logo {
margin-left: 80px;
}

@media (max-width: 1250px){
.main-navigation .navigation-logo.site-logo {
margin-left: 80px;
}
}

li.slideout-toggle a { font-size: 26px;
}

li.slideout-toggle {
position: absolute;
margin-left:30px;
}
.inside-navigation {
position: static;
}

.inside-header {
position: relative;
}

.inside-header .site-logo {
margin-left: 40px;
}

.navigation-stick .inside-navigation {
position: relative;
}

.navigation-stick li.slideout-toggle {
top: 0;
}

.main-navigation li.menu-item-float-left {
float: left;
}

.main-navigation li.menu-item-float-right {
float: right;
}

Can you remove all the menu-item-float-right and menu-item-float-left classes as well so the menu goes back to original order?

Then add class free to Free Dating Ebook and class start to Start Here.

After that we can use flexbox to arrange it :)

Thanks!

Ok - items removed and added.

Hmm I'm not sure if my original thought of using Flexbox would work.

I'll ask David and report back :)

Ok I think I got this. Follow the steps here:

- Add the logo as the first menu item using a custom link:
URL: LINK TO YOUR HOME PAGE
Navigation Label: <img src="http://LOGO-IMAGE-URL" alt="" />
CSS Classes: site-logo sticky-logo navigation-logo

- Remove the navigation logo from the customizer

- Add this CSS:

@media (min-width: 769px) {
    .main-navigation ul {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }
    li.slideout-toggle {
        -webkit-box-ordinal-group: 0;
            -ms-flex-order: -1;
                order: -1;
        float: none !important;
    }
    li.start {
        margin-left: auto;
    }
}

Let me know :)

That worked great - thanks!

No problem :)