menu switches sides on mobile

Hi there,

Disable the Mobile Header in Customizer > Layout > Header

Hi David,

Thanks, but a new problem now. That has put the icon to the right but has added a second one below it.

Cheers,

Dan

Aah ok - i see what you have done.
So instead of adding the menu toggle as a menu item for display in the nav try this instead:

1. Create a Menu with no menu items in it and assign this to your Primary Navigation.
2. In Customizer > Layout > Off Canvas - make sure this is set to display ( for desktop and mobile ).

What this will do is only display the Off Canvas Toggle for both desktop and mobile.

That didn't quite work either. Now it has an extra toggle to the bottom left. I don't think I did have the toggle as a menu item (apologies if I'm wrong about that). I think what might be the issue is that I have added CSS to make the logo centered. If I take that out then I don't have two toggles, but then I don't have the centered logo of course. This is the code I've got for the centering. And I had "menu-item-separator" as an invisible part of the menu.

.inside-header {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}

.header-widget {
order: 10;
overflow: visible;
}

.nav-float-right .header-widget {
top: auto;
}

.nav-float-right .header-widget .widget {
padding-bottom: 0;
}

.site-branding,
.site-logo {
position: absolute;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
z-index: 200;
}
#mobile-header .mobile-bar-items {
-webkit-box-ordinal-group: 5;
-ms-flex-order: 4;
order: 4;
margin-left: auto;
}
#site-navigation {
float: none;
width: 100%;
}

.main-navigation:not(.slideout-navigation):not(.mobile-header-navigation) .main-nav > ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}

.main-navigation .menu-item-separator {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}

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

.slideout-navigation .menu-item-separator,
.main-navigation.toggled .menu-item-separator{
display: none !important;
}

@media (max-width: 768px) {
.inside-header>:not(:last-child):not(.main-navigation) {
margin-bottom: 0;
}
}

@media (min-width: 769px) {
#sticky-navigation .main-nav,
#sticky-navigation .main-nav .menu-item-separator {
flex: 1;
}

#sticky-navigation .navigation-branding {
position: absolute;
left: 50%;
transform: translatex(-50%);
}
}

Now you can delete all of that CSS and add this:

.site-logo,
#sticky-navigation .navigation-branding {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translatex(-50%);
}

.main-nav {
    width: 100%;
}

Getting closer I think. Now the only problem is that the toggle switches to the left once I start scrolling.

Made an edit here

That fixed some of it. Now it only switches left when scrolling on mobile.

Doh!

add this lol:

.main-navigation .menu-toggle {
    margin-left: auto;
}

Perfect! Thanks for your help!

Phew - Glad we got there - think i need some coffee lol
you're welcome