1

Надо сделать вот такое:

вот такое

Я сделал, но явно не резиновое. Можете объяснить что к чему и помочь?

.navbar {
	background: #f76e5d;
	height: 90px;
}
.nav,.navbar-nav,.navbar {
	border-radius: 0;
}

.nav li a{
	line-height: 59px;
	color: #fff;
	font-size: 17px;
	text-transform: uppercase;
}

.nav li a:hover {
	background: #000;/*#f88172;*/
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<nav>
  <div class="container navbar">
    <div class="row">
      <div class="container" style="width: 401px;">
        <ul class="nav navbar-nav">			    		
    	  <li><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>
    </div>
  </div>
</nav>

Там сам bootstrap еще подключен.

2 ответа 2

2

Возьмём пример с сайта Бутстрапа. Удалим лишние пункты и всё, что сворачивает меню на мобильном экране. Останется:

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

-1
style="width: 401px;"

Дык ты ширину указал, откуда оно резиновым будет. ;)

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.