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.

Solution

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.