Возьмём пример с сайта Бутстрапа. Удалим лишние пункты и всё, что сворачивает меню на мобильном экране. Останется:
<nav class="navbar navbar-default">
<div class="container">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Work</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</nav>
Теперь переделаем стили. Возьмём за основу то, что пишут в bootstrap.css про navbar-default
и .navbar-default .navbar-nav
:
.navbar-default {
background-color: #f8f8f8;
border-color: #e7e7e7;
}
.navbar-default .navbar-nav > li > a {
color: #777;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
color: #333;
background-color: transparent;
}
.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-red-centered
. Сначала проруководим отступами и высотой элементов:
.navbar-red-centered .navbar-nav {
margin: 0;
}
.navbar-red-centered .navbar-nav > li > a {
line-height: 90px;
padding: 0 15px;
}
Потом отцентрируем по горизонтали:
.navbar-red-centered .navbar-nav {
float: none;
text-align: center;
}
.navbar-red-centered .navbar-nav > li {
display: inline-block;
float: none;
}
И перекрасим. Получится, например, так:

http://codepen.io/glebkema/pen/GNvpdL
.navbar-red-centered .container {
background: #f76e5d;
}
.navbar-red-centered .navbar-nav {
float: none;
margin: 0;
text-align: center;
}
.navbar-red-centered .navbar-nav > li {
display: inline-block;
float: none;
}
.navbar-red-centered .navbar-nav > li > a {
line-height: 90px;
color: #fff;
font-size: 17px;
padding: 0 15px;
text-transform: uppercase;
}
.navbar-red-centered .navbar-nav > li > a:hover,
.navbar-red-centered .navbar-nav > li > a:focus {
color: #333;
background-color: transparent;
}
.navbar-red-centered .navbar-nav > .active > a,
.navbar-red-centered .navbar-nav > .active > a:hover,
.navbar-red-centered .navbar-nav > .active > a:focus {
color: #555;
background: #ffc6ad;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<nav class="navbar navbar-red-centered">
<div class="container">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Work</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</nav>