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

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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