Hamburgher only menu (desktop+mobile) Alignement issues

Hi there,

you can set the Customizer > Layout > Primary Navigation > Navigation Location > Float Right

Hello, I tried, but nothing happens!

FYI: I followed your tutorial to use hamburgher menu only in desktop/mobile version, and It worked nicely.

This morning I made a little change inside a menu link and suddendly the icon appered to the wrong side, but only in desktop version. In mobile it's ok!

Right ok you have this CSS, i have added another line with comment, put that line in the code and all should be good :)

@media (min-width: 769px) {
    .main-navigation ul {
        display: flex;
        justify-content: flex-end; /* Add this line */
    }
    .main-navigation li.center-logo {
        order: 2;
        margin: auto;
    }
    li.slideout-toggle {
        order: 3;
        float: none;
    }
    li.search-item {
        float: none;
        z-index: 21;
        order: 1;
    }
}

hehe! Now the situation is the opposite :-D

Take a look:

.main-navigation.slideout-navigation .main-nav {
position: relative;
z-index: 99;
}

.sticky-enabled .main-navigation.is_stuck {
box-shadow: none;
}

@media(max-width: 768px) {
#site-navigation {
clear: none;
background: transparent;
z-index: 10;
position: absolute;
}

.site-branding {
display: block;
float: left !important;
}

.site-logo {
float: right !important;
clear: none !important;
max-width: 70%;
}

button.menu-toggle {
width: auto;
float: right;
}
}
@media (min-width: 769px) {
.main-navigation ul {
display: flex;
justify-content: flex-end; /* Add this line */
}
.main-navigation li.center-logo {
order: 2;
margin: auto;
}
li.slideout-toggle {
order: 3;
float: none;
}
li.search-item {
float: none;
z-index: 21;
order: 1;
}
}

html,
body{
width:100%;
overflow-x:hidden;
}

Actually the desktop version is ok.
In mobile the icon is on the wrong side, but seems to be ok in sticky!

Question, are you only going to have the Hamburger menu in the nav/header? If so then you don't need the other code and can just use the Customizer settings. Let me know. BTW i can inspect the Site and see the code there, so no need to paste it here :)

Oh sorry!

Yes, confirm. I only need to put in place the hambugher in the nav.

No worries. If that is the case then you can remove that CSS for the navigation as its blocking the Customizer settings

The strange thing is that I cleared the whole CSS code portion. But now I'm not able to change the position of the icon through the customizer. Only with css insertion, that's strange.

Ok you have similar CSS in your child theme and in the Customizer > Additional CSS

additional css is where I placec the code above

There is this CSS in the Child Theme Style sheet:

@media (min-width: 769px) {
    .main-navigation ul {
        display: flex;
    }
    .main-navigation li.center-logo {
        order: 2;
        margin: auto;
    }
    li.slideout-toggle {
        order: 3;
        float: none;
    }
    li.search-item {
        float: none;
        z-index: 21;
        order: 1;
    }
}

You shouldn't need either of those CSS rules ( child theme and additional CSS ) to make this work :)

I missed it! Thanks!

You're very welcome :)