Konrad Viltersten Konrad Viltersten - 12 days ago 6
HTML Question

How to ensure that a DIV comes below the navbar?

I'm using Materialize to create a navbar like the code below shows. After that, I render a div element to hold my application but the topmost part of it gets hidden by NAV element.

<div class="navbar-fixed">
<nav class="nav-extended deep-purple">
<div class="nav-wrapper">
...
<ul id="nav-mobile" class="application right hide-on-med-and-down">
<li>...</li>
...
<li>...</li>
</ul>
</div>
</nav>
</div>

<div id="application">Shazoo</div>


My current workaround is to simply add a top margin to the DIV named application but it's hardly something I want to see in a printed book as a best practice. I'm guessing there's a specific hack for Materialize that I haven't found. The documentation seems a bit Spartan on the website.

Answer

To avoid adding the margin or an extra div, just add top padding to your body like this:

body {
    padding-top: ABCpx;
}

Where ABCpx is the height of your fixed navbar.

Comments