Возникли проблемы изменения цвета в Bootstrap навигационной панели

Использование Bootstrap 3Возникли проблемы изменения цвета в Bootstrap навигационной панели

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

<div class="navbar navbar-default navbar-fixed-top"> 
    <div class="container"> 
     <div class="navbar-header">    
     <a href="/index.html" class="navbar-brand visible-xs">My Site Name</a> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     </div> 
    ... 
    </div> 
</div>

Любая помощь будет оценена.

Благодаря

источник

2016-02-17 user2255700

http://stackoverflow.com/questions/18529274/change-navbar-color-in-twitter-bootstrap-3 – Microsmsm

Хорошо добавить то, что вы пробовали, даже если оно не работает. –

Я согласен с Саймоном, я хотел включить это, но забыл. Я пробовал разные селекторы, включая сообщение, которое я проголосовал, но я испортил синтаксис, и поэтому он не работал. – user2255700

Используйте следующий селектор:

.navbar-default .navbar-brand { 
    color: #777; /* Your color here */ 
}

И изменить цвет парения:

.navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus { 
    color: #555; 
    background-color: transparent; 
}

источник

2016-02-17 19:47:53

Я думаю, что мой ответ более подробно? – Microsmsm

Use the following code

/* navbar */ 
 
.navbar-default { 
 
    background-color: #F8F8F8; 
 
    border-color: #E7E7E7; 
 
} 
 
/* title */ 
 
.navbar-default .navbar-brand { 
 
    color: red; /*Change color*/ 
 
} 
 
.navbar-default .navbar-brand:hover, 
 
.navbar-default .navbar-brand:focus { 
 
    color: #5E5E5E; 
 
} 
 
/* link */ 
 
.navbar-default .navbar-nav > li > a { 
 
    color: #777; 
 
} 
 
.navbar-default .navbar-nav > li > a:hover, 
 
.navbar-default .navbar-nav > li > a:focus { 
 
    color: #333; 
 
} 
 
.navbar-default .navbar-nav > .active > a, 
 
.navbar-default .navbar-nav > .active > a:hover, 
 
.navbar-default .navbar-nav > .active > a:focus { 
 
    color: #555; 
 
    background-color: #E7E7E7; 
 
} 
 
.navbar-default .navbar-nav > .open > a, 
 
.navbar-default .navbar-nav > .open > a:hover, 
 
.navbar-default .navbar-nav > .open > a:focus { 
 
    color: #555; 
 
    background-color: #D5D5D5; 
 
} 
 
/* caret */ 
 
.navbar-default .navbar-nav > .dropdown > a .caret { 
 
    border-top-color: #777; 
 
    border-bottom-color: #777; 
 
} 
 
.navbar-default .navbar-nav > .dropdown > a:hover .caret, 
 
.navbar-default .navbar-nav > .dropdown > a:focus .caret { 
 
    border-top-color: #333; 
 
    border-bottom-color: #333; 
 
} 
 
.navbar-default .navbar-nav > .open > a .caret, 
 
.navbar-default .navbar-nav > .open > a:hover .caret, 
 
.navbar-default .navbar-nav > .open > a:focus .caret { 
 
    border-top-color: #555; 
 
    border-bottom-color: #555; 
 
} 
 
/* mobile version */ 
 
.navbar-default .navbar-toggle { 
 
    border-color: #DDD; 
 
} 
 
.navbar-default .navbar-toggle:hover, 
 
.navbar-default .navbar-toggle:focus { 
 
    background-color: #DDD; 
 
} 
 
.navbar-default .navbar-toggle .icon-bar { 
 
    background-color: #CCC; 
 
} 
 
@media (max-width: 767px) { 
 
    .navbar-default .navbar-nav .open .dropdown-menu > li > a { 
 
     color: #777; 
 
    } 
 
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, 
 
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus { 
 
     color: #333; 
 
    } 
 
}

источник

2016-02-17 19:51:27 Microsmsm

Это больше, чем просто бренд. Может быть, вы должны объяснить, что делает каждый бит? –

Я думаю, что я прокомментировал каждый раздел – Microsmsm

Возникли проблемы изменения цвета в Bootstrap навигационной панели

ответ

Смежные вопросы