Как настроить высоту и площадь навигационных ссылок в Materialise CSS?

Question

У меня есть марка-lo go в моей навигационной панели, и чтобы она подходила и выглядела хорошо, мне пришлось увеличить высоту моей навигационной панели. Однако после этого навигационные ссылки остаются в положении, как если бы высота никогда не изменялась. Чтобы это исправить, мне пришлось добавить поле в тег ul. Несмотря на то, что этого достаточно, чтобы удалить ссылки, эффект наведения не распространяется на всю высоту панели навигации. Как это исправить?

html:

<nav class="deep-orange darken-2">
        <div class="nav-wrapper container">
            <a class="brand-logo" href=""><img src="logo.png" alt=""></a>
            <ul class="hide-on-med-and-down right nav-links">
                <li><a href="">Home</a></li>
                <li><a href="">Admission</a></li>
                <li><a href="">Mentors</a></li>
                <li><a href="">Location</a></li>
            </ul>
        </div>
    </nav>

css:

.brand-logo img {
    height: 95px;
}

nav {
    height: 100px;
}

.nav-links {
    margin-top: 15px;
}

Answer 1

Хорошо, быстрый ответ - высота строки:

nav {
  height: 100px;
}

nav ul li,
nav ul li a,
.brand-logo {
  line-height: 100px;
}

https://codepen.io/doughballs/pen/vYNGGYW

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

Также - Materialize имеет две высоты навигации, мобильные и выше, и они установлены на определенное контрольные точки. Абсолютно лучший способ сделать это si suing sass - вы изменяете высоту навигационной панели один раз, а затем все высоты строк обновляются из этой единственной переменной.

Если это то, что вас интересует, Я знаю, и я обновлю перо.

Вам не нужно делать что-то сумасшедшее с полями - используйте те же соглашения, что и Materialise.