[Support request] Floating Mobile Menu

[Óscar]

Hi,

I have the sticky menu activated in mobile devices, but all the navbar is displayed. I would like to have a floating icon with the collapsed navigation.

Is there any option or should I use some CSS?

Thanks.

[David]

Hi there,

to display just the Mobile menu toggle would require some CSS.
Let us know if you need a hand with that, and if so can you add a URL to the site. You can edit the original topic and use the Site URL field.

[Óscar]

Hi,

The padding is in the “inside-navigation” div.

[Óscar]

It shows 375×94.

I have tested

.inside-navigation {
	margin-bottom: -1.75em
}

But I would like to simply change the padding to 375x60px, just like the button.menu-toggle.

[David]

Hi there,

this CSS you have added is causing it:

.main-nav {
	margin-top: 2em
}

You swap that for this so it don’t apply to mobile:

@media (min-width: 768px) {
    .main-nav {
        margin-top: 2em
    }
}

[Óscar]

Ok! Nice, adjusted to 872px, which is for my logo and navbar the current trigger point.

So what code should I use to get a transparent navbar in mobile?

[David]

Try this CSS:

@media (max-width: 872px) {
    .sticky-enabled .main-navigation.is_stuck {
        background-color: transparent;
    }
}

[Author]

Posts