Search code examples
htmlcssmaterial-designmaterialize

How to set the height and positon of the Materialize side-nav?

I've looked at http://materializecss.com/side-nav.html and can see how to control the height and position of the side-nav. It's occupying the screen from the top, but what if I want it to show below the navbar?

Solution

  • You would have to make the header 100% and remove the padding-left of 300px. You would then need to add a margin-top of 122px or whatever the height of your navbar is.

    The code would look something like the following:

    header, main, footer {
    width: 100%;
    padding-left: 0;
}

ul.side-nav.fixed {
    overflow: hidden;
    margin-top: 122px;
}

    and give you a result like: https://i.sstatic.net/T7d4W.jpg