В прошлом уроке мы сделали обычную кнопку, которую видно, когда меню не влазит в экран браузера
Но далеко не все люди поймут, что означает эта кнопка, давайте исправим эту проблему.
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapse">
<span class="sr-only">Toggle navigation</span>
<span class="glyphicon glyphicon-arrow-down"></span>
MENU
</button>
</div> Ну вот, часть проблемы мы решили. Теперь у нас есть слово MENU и новая глиф иконка. Осталось придать дизайна этому всему.
.navbar-inverse .navbar-toggle {
color: white;
font-weight: bold;
border-color: white;
}
.navbar-inverse .navbar-toggle:hover {
background-color: #ddd;
color: #333;
}
.navbar-inverse .navbar-toggle .glyphicon {
color: white;
}
.navbar-inverse .navbar-toggle:hover .glyphicon {
color: #333;
} Ну вот и все, смотрим результат