Search code examples
htmlcssmaterialized-viewsmaterialize

Fixed Nav bar position not show in position using Materializecss Framework


I use Materializecss Framework for my Phonegap application. I use navigation bar in my application which have to be fixed on top of the screen. But the position of that Navigation bar doesn't show on top of the screen its shown little bit down at the phone, but when I test on browser it's shown on top of the screen.

HTML Code:-

<div class="navbar-fixed">
<nav>
   <div class="nav-wrapper headercol z-depth-1 centr">
    <a href="#!">Test App</a>
  </div>
</nav>

enter image description here


Solution

  • Judging by the documentation, my guess would be just to edit the minified css file to make sure there is zero margins and paddings on the body.

    To do this follow below;

    1. Find your cascading style sheet, by default its named. materialize.min.css you can locate this in your css folder.
    2. Open it in your favorite text/code editor.
    3. Use find to locate the body{
    4. Add the below code to it.
    margin:0;padding:0;
    1. ???????
    2. Profit, or comment to let me know if you need more help.