Burger menu floating without logo or navbar at mobile

Hi there,

can you share a link to the site where i can see this ?

https://ousialab.com

Go to Customizer > Layout > Header
There you can remove the Mobile Header Logo

Ok, that prevents the sticky navbar, but now the menu get lost upwards, and I'd want to show the burger icon floating in the corner.

Hi Oscar,

Do you want something like this?
https://www.screencast.com/t/c97nPLl3EV

If so, try add this CSS:

@media (max-width: 768px) {
    .main-navigation .menu-toggle {
        display: flex;
        justify-content: flex-end;
    }
}

If you want the icon float to the left, remove this line: justify-content: flex-end;

Yes, but isn't there anyway to separate the toggle button from navbar so the client can click left of the button?

Remove the CSS Ying provived.
Add this:

#site-navigation .menu-toggle {
    flex-grow: 0;
    margin-left: auto;
}

Ok, that solved the separation, but still isnt't floating like I intended. If I activate sticky navigation the navbar displays fully with the button whenever I go upwards in mobile, if I deactivate it, then the button doesn't appears floating.

Thats probably because you have this CSS which is adding a white background to the inner container:

.nav-align-center .inside-navigation {
    background: white;
}

Change it to this so it doesn't affect the mobile:

@media(min-width: 769px) {
   .nav-align-center .inside-navigation {
       background: white;
   }
}

Right now I've changed the CSS and activated sticky navigation so that button stays at top, but navbar still displays (transparent) and prevents that area from being "clickable", also, logo displays too.

Add this CSS:

@media(max-width: 768px) {
    .sticky-enabled .main-navigation.is_stuck {
        box-shadow: unset !important;
    }
    .sticky-enabled .main-navigation.is_stuck .navigation-branding {
        display: none;
    }
}