[Support request] menu switches sides on mobile

[Daniel]

Hi,

I’ve set up the off canvas menu icon to be on the right of the logo, but on mobile it changes to the left.

Thanks,

Dan

[David]

Hi there,

Disable the Mobile Header in Customizer > Layout > Header

[Daniel]

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

[David]

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.

[Daniel]

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

[David]

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

[Daniel]

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

[David]

Made an edit here

[Daniel]

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

[David]

Doh!

add this lol:

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

[Daniel]

Perfect! Thanks for your help!

[David]

Phew – Glad we got there – think i need some coffee lol
you’re welcome

[Author]

Posts