Проблема масштабирования с использованием значков в navbar

Question

У меня есть значки в navbar с помощью materialize.css. Когда окно опускается ниже определенного порога, все значки смещаются в верхнюю часть. Как я могу предотвратить это смещение, не скрывая значки на маленьких экранах?

Fiddle. Обратите внимание, как значки смещаются вверх, когда размер кадра становится меньше 600 пикселей.

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

Answer 1

CSS Media Queries используются в коде (в ghpages-materialize.css), это означает, что существуют различные стили для различного экрана (или окна) Размеры:

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; 
} 

Вы можете предотвратить эту перемену путем определения стилей каждого размера экрана. Инструменты разработки Chrome помогут вам в этом.

Вы можете добавить это в файл CSS, чтобы исправить это (для всех средств массовой информации):

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

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

Answer 2

Вы можете исправить высоту линии значка. Смотрите скрипку.

http://jsfiddle.net/b6naew9h/16/

.material-icons { 
    line-height: 56px; 
}