Konrad Viltersten Konrad Viltersten - 11 months ago 47
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">

<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 Source

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.