Search code examples
htmlcssmaterialize

Scaling issue using icons in navbar

I have icons in a navbar using materialize.css. When the window falls below a certain threshold all icons are shifted to the top. How can I prevent this shifting whithout hiding the icons on small screens?

Fiddle. Notice how the icons are shifting upwards when the size of the frame gets smaller than 600px.

<nav>
  <div class="nav-wrapper">
    <a href="#" class="brand-logo center">
      <i class="material-icons left">local_bar</i>
      Title
    </a>
    <ul class="right">
      <li><a><i class="material-icons">more_vert</i></a></li>
    </ul>
  </div>
</nav>
Solution

  • CSS Media Queries are used in your code (in ghpages-materialize.css), that means there are different styles for different screen (or window) sizes :

    nav {
    color: #fff;
    background-color: #ee6e73;
    width: 100%;
    height: 56px;
    line-height: 56px;
}

@media only screen and (min-width: 601px)
nav, nav .nav-wrapper i, nav a.button-collapse, nav a.button-collapse i {
    height: 64px;
    line-height: 64px;
}

    You can prevent this shifting by fixing the styles of each screen size. Chrome developper Tools can help you fixing this.

    Chrome Developper Tools

    You can add this to your CSS file to fix it (for All media) :

    nav {
    height: 64px;
    line-height: 64px;
}

i.material-icons.left {
    line-height: 64px;
}