Как сделать navbar меньше?

Question

[Randewoo]

В стандартном navbar'e высота равняется 80px, можно-ли как-то сократить эту высоту с тем условием, что текст так-же останется по центру? Я пытался уменьшить, у меня получалось, но и текст в свою очередь уходил выше.

Answer 1

[Андрей]

В чём собственно сложность?

.uk-navbar-nav>li>a {
    min-height: 40px; /* уменьшили высоту */
}

или для всех сразу

.uk-navbar-item, .uk-navbar-nav>li>a, .uk-navbar-toggle {
   min-height: 40px; 
}

этого достаточно. когда стили подключены в правильном порядке

Comments

[Randewoo]

У меня там анекдот был оказывается. Случайно пихнул стандартный UIKit и RTL.
Кстати чем дефолтный от RTL отличается? Для арабов что ли?

[Андрей]

Randewoo, Ну да. Для тех сайтов, где направление "справа налево".
Обычно подключается (файл со стилями)
либо uikit.min.css (присутствуют небольшие дополнительные "украшательства")
либо uikit-core.min.css (без дополнительных "украшательств")
либо uikit.my-theme.min.css (собственная тема)

[Randewoo]

Андрей, а можешь покидать пожалуйста темы какие-нибудь для UIKit из рода "бесплатные"? Я верстаю на некоммерческой основе, и платить за то, чтоб сделать бесплатно - ну сам понимаешь

[Андрей]

Randewoo, несколько "сторонних" примеров с версткой:
Kick-Off (github)тут примеры,
ещё Computer store e-commerce template (github)..
.. по поводу целых сайтов с индивидуальным дизайном заказчиков, то выкладывать было бы неправильно, либо вовсе запрещено.
В принципе "творить" и на сайте выкладывать темы/шаблоны, готовые решения, от минимальных до... есть в планах. Тут как обычно подводит время, которого катастрофически не хватает.

Answer 2

[ildar-meyker]

Пока ждем Андрея, могу ответить.

Да, можете. Но необходимо поделиться кодом, потому что такое меню можно собрать несколькими способами.

Comments

[Randewoo]

Дак я знаю, что могу, просто не знаю, как xDD
Это стандарный нав из документалки, который прикрепляется к топу после скролла

<div uk-sticky="sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky; bottom: #transparent-sticky-navbar">
    <nav class="uk-navbar-container" uk-navbar style="position: relative; z-index: 980;">
        <div class="uk-navbar-left">

            <ul class="uk-navbar-nav">
                <li class="uk-active"><a href="#">Active</a></li>
                <li>
                    <a href="#">Parent</a>
                    <div class="uk-navbar-dropdown">
                        <ul class="uk-nav uk-navbar-dropdown-nav">
                            <li class="uk-active"><a href="#">Active</a></li>
                            <li><a href="#">Item</a></li>
                            <li><a href="#">Item</a></li>
                        </ul>
                    </div>
                </li>
                <li><a href="#">Item</a></li>
            </ul>

        </div>
    </nav>
</div>

Answer 3

[Randewoo]

Ответ найден.
Оказывается, UIKit убог, в нем везде надо пихать !important, если хочешь изменить стиль под себя. Зачем?
За ответ, как всегда, спасибо Андрею ;)

.uk-navbar-nav > li > a,
.uk-navbar-item,
.uk-navbar-toggle {
  min-height: 50px !important;

Comments

[Андрей]

Почему убог?
может порядок подключения стилей не тот?
если не делалась своя тема. с изменением стандартных размеров и добавлением своих, то сначала идёт первым файл со стилями uikit. а изменяемые стили идут после.
!important; - не обязательно! всё работает прекрасно и без !important;