Materialize: Mobile Collapse Button + Fixed Navbar Overlay (Pop Up Navigation Overlayed)

Created on 18 Nov 2016 · 3Comments · Source: Dogfalo/materialize

I set my navigation bar to be in fixed position.
But when the browser is resized so that the hamburger menu is visible.
And when I click the hamburger menu and to the hide menu option, the menu options is also overlayed

You can view demo here

Source

SoproniOli713

Most helpful comment

You can put navbar-fixed class on nav and close nav as soon as top navigation bar code ends. Ex:

<nav class="blue-grey darken-4 navbar-fixed">
    <a href="#!" class="brand-logo">Logo</a>
    <a href="#" data-activates="slide-in" class="button-collapse"><i class="material-icons">menu</i></a>
 </nav>
 <ul class="right hide-on-med-and-down">
    <li><a href="sass.html">Sass</a></li>
    ...

kmmbvnr on 18 Nov 2016

👍2 ❤1

All 3 comments

You can put navbar-fixed class on nav and close nav as soon as top navigation bar code ends. Ex:

<nav class="blue-grey darken-4 navbar-fixed">
    <a href="#!" class="brand-logo">Logo</a>
    <a href="#" data-activates="slide-in" class="button-collapse"><i class="material-icons">menu</i></a>
 </nav>
 <ul class="right hide-on-med-and-down">
    <li><a href="sass.html">Sass</a></li>
    ...

kmmbvnr on 18 Nov 2016

👍2 ❤1

@kmmbvnr Thanks.

SoproniOli713 on 18 Nov 2016

These issues are all duplicates:
https://github.com/Dogfalo/materialize/issues/1664
https://github.com/Dogfalo/materialize/issues/3918
https://github.com/Dogfalo/materialize/issues/4046
https://github.com/Dogfalo/materialize/issues/4231
https://github.com/Dogfalo/materialize/issues/437
https://github.com/Dogfalo/materialize/issues/4318
https://github.com/Dogfalo/materialize/issues/3982
https://github.com/Dogfalo/materialize/issues/2879
https://github.com/Dogfalo/materialize/issues/4187