@Randewoo

Как изменить цвет navbar в UIkit?

Здравствуйте.
Прошу сразу не кидаться тапками, сам html я знаю довольно таки давно, но только основы, стили для меня до сих пор остаются загадками. На днях наткнулся на простой и очень классный фреймворк (для меня) - UIKit.
Мне надо сделать navbar синим цветом, я скопировал код отсюда - https://getuikit.com/docs/navbar
Далее, я выбрал подходящий navbar - 5c51ed20c307c606935736.png
Вот код:
spoiler
<nav class="uk-navbar-container" uk-navbar>

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

    <div class="uk-navbar-right">

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

Но как-бы я не пытался изменить цвет (https://getuikit.com/docs/background), у меня ничего не выходит. Можете пожалуйста помочь, куда добавить этот CSS класс с цветом - .uk-background-primary (в документации, этот цвет означает синий)?
Цвет получается изменить, если указать style="background: #000;" в самом <nav>, но очень бы хотелось это сделать средствами фрейморка и CSS стилями. Заранее большое спасибо!
  • Вопрос задан
  • 215 просмотров
Решения вопроса 1
l3ftoverz
@l3ftoverz Куратор тега CSS
Люблю Финский металкор
https://jsfiddle.net/jf4z3pd8/
Это происходит из-за :not псевдокласса в самом UIKIT, который имеет больший приоритет p_quCfwjllY.jpg

Решения такие:

1. Указать стиль инлайново, как и вы и делали, инлайн стили имеют приоритет выше.
2. Создать свой CSS, скопипастить туда тот код в кружке со скрина и поменять там цвет, файл подключить после подключения CSS самого фреймворка.
3. в HTML поставить класс uk-brackground-transparent, что не даст выполниться стилям в :not https://jsfiddle.net/jf4z3pd8/1/
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы