Создание Маленького Навбара и боковой панели в Materialise CSS

Question

Я использую материализовать CSS для моего нового проекта. У меня есть простой макет страницы, которую я имею в виду. Это то, что я хотел бы иметь. Навбар выше и боковая панель не должны скрываться.

Я попытался изменить CSS для материализации, чтобы получить боковую панель навигации, но безрезультатно. Я изменил

@media only screen and (max-width: 992px) {
    .side-nav.fixed {
-webkit-transform: translateX(-105%);
        transform: translateX(-105%);
}

в

@media only screen and (max-width: 2000px) {
    .side-nav.fixed {
-webkit-transform: translateX(-105%);
        transform: translateX(-105%);
}

Я также пытался изменить файл.js, но он также не работал. Я уменьшил размер обычной навигационной панели line-height собственность нав. Возможно ли иметь навигационные панели вместе? Если нет, то как мне получить боковую панель? Мне нужна только боковая панель, чтобы показать 4 иконки, которые будут иметь всплывающую подсказку, и при нажатии будет загружено модальное окно. Я пытался использовать сеточный механизм materialize css, но не смог получить то, что хочу.

Любая помощь приветствуется.

Благодарю.

Answer 1

Вы пытались использовать верхнюю панель навигации вместе с фиксированной боковой панелью? Затем вы можете задать ширину боковой панели, чтобы получить нужный размер.

<header>
      <nav class="top-nav">
        <div class="nav-wrapper">
            <ul class="right hide-on-med-and-down">
                <li><a href="#">Log In</a></li>
                <li><a href="#">Sign Up</a></li>
            </ul>
        </div>
      </nav>
      <ul style="width:120px; margin-top:65px;" class="side-nav fixed">
        <li><a href="#">Icon 1</a></li>
        <li><a href="#">Icon 2</a></li>
      </ul>      
</header>