[Support request] Burger menu floating without logo or navbar at mobile

[Óscar]

Hi, I’m trying to leave only the burger menu floating at its own without any navbar, logo or whatsoever, but I can’t find any way to do it in theme customization settings. Even with off canvas panel activated and sticky navigation deactivated on mobile someway the navbar is still sticky and slides fully with the logo.

Any idea on how to solve this?

[David]

Hi there,

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

[Óscar]

https://ousialab.com

[David]

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

[Óscar]

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.

[Ying]

Hi Oscar,

Do you want something like this?

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;

[Óscar]

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

[David]

Remove the CSS Ying provived.
Add this:

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

[Óscar]

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.

[David]

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

[Óscar]

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.

[David]

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

[Author]

Posts