search

Daemonite / material

Material Design for Bootstrap 4
http://daemonite.github.io/material/
MIT License
3.2k stars 725 forks source link

Navigation drawer hidden behind toolbar #202

Closed jjoseba closed 4 years ago

jjoseba commented 5 years ago

When using a toolbar with .sticky-top or .fixed-top class in combination with a navigation drawer using .navbardrawer-permanent, the drawer shows up behind the toolbar, hidding its top part. It is a problem with the .navbardrawer-permanent class z-index (it is set to auto). In my case I fixed it making a rule that modifies this z-index, but I'm not sure if it would apply to all the navigation drawer cases...

sesemaya commented 4 years ago

Hi @jjoseba,

This depends on how the navbar is intended to work.

With your fix, the navigation drawer will cover the left part of the toolbar, which itself may also be an issue.

The permanent navigation drawer is supposed to push the toolbar to the right/left like the rest of the page.

Screen Shot 2020-01-08 at 12 29 10 pm

Because a permanent navigation drawer is always visible, you may need to add some custom styles to shift the content of your page to the left or right to accommodate the screen estate being taken up by the drawer.

gismofx commented 3 years ago

@sesemaya Thanks for providing that answer and style example. Can those custom styles be added into the main CSS? Short term, How do I add that custom style you shared above? Can it be in a separate file?