Bootstrap 3 Complicated Nav Bar - A Toughie

Question

После двух лет программирования в CSS я решил заняться своим следующим проектом, используя Bootstrap 3. Большинство из них идет гладко, за исключением моего навигационного бара, дизайн которого не такой обычный (см. ниже). У меня возникают трудности с ее отзывчивостью.

Когда это мобильный телефон, я хочу отобразить логотип слева и значок гамбургера справа. Затем я хочу, чтобы красный ящик с подставкой под ним. Но я не могу заставить его так рухнуть.

Вот мой базовый код. Я прекратил свои усилия, чтобы сделать его отзывчивым, поскольку те потерпели неудачу и только смутили людей.

Может кто-нибудь придумать решение? Благодаря!

<div class="bluenavbar"> 
    <div class="container"> 
     <img class="logo img-response" src="images/logo.png"> 
     <ul class="nav navbar-nav" role="tablist"> 
      <li class="active"><a href="#">Home</a></li> 
      <li><a href="#">About</a></li> 
      <li><a href="#">Issues</a></li> 
      <li><a href="#">Editorial</a></li> 
      <li><a href="#">Sponsors</a></li> 
      <li><a href="#">Contact</a></li> 
     </ul> 
    </div> 
</div> 

<div class="redbar"> 
    <div class="col-md-6"> 
     <p class="tagline">this is the tagline. this is the tagline. this is the tagline. this is the tagline. this is the tagline. this is the tagline.</p> 
    </div> 
</div> 

-

.bluenavbar { 
    height: 50px; 
    background-color: #23408f; 
    color: white; 
} 
.logo { 
    float: left; 
} 
.navbar-nav { 
    float: right; 
} 
.redbar { 
    background-color: #ff0000; 
    height: 50px; 
    margin-top: 20px; 
    color: white; 
} 
.tagline { 
    margin-left: 60px; 
    text-align: center; 
    margin-top: 5px; 
} 

Answer 1

Постарайтесь не сделать его более усложнить, чем это должно быть. Начните со стандартной маркировки и добавьте классы Bootstrap, чтобы сделать это как можно ближе к вашему дизайну. Затем слой в ваших настройках.

DEMO

HTML:

<nav class="navbar navbar-blue navbar-fixed-top" role="navigation"> 
    <div class="container"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-nav"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <img class="logo img-response" src="http://placehold.it/225x150/000099/fff&text=LOGO" /> 
    </div> 
    <div class="collapse navbar-collapse" id="main-nav"> 
     <ul class="nav navbar-nav navbar-right"> 
     <li class="active"><a href="#">Home</a></li> 
     <li><a href="#">About</a></li> 
     <li><a href="#">Issues</a></li> 
     <li><a href="#">Editorial</a></li> 
     <li><a href="#">Sponsors</a></li> 
     <li><a href="#">Contact</a></li> 
     </ul> 
    </div><!-- /.navbar-collapse --> 
    </div><!-- /.container-fluid --> 
</nav> 

CSS

body { 
    padding-top: 60px; 
} 
.navbar-blue { 
    background-color: #000099; 
    border-color: #000066; 
} 
.navbar-blue>.container { 
    position: relative; 
} 
.logo { 
    position: absolute; 
    top: 0; 
    left: 15px; 
    height: 50px; 
} 
.navbar-toggle { 
    padding: 10px; 
    margin-top: 0; 
    margin-bottom: 0; 
} 
.navbar-blue .navbar-toggle { 
    border-color: transparent; 
    color: #fff; 
} 
.navbar-blue .navbar-nav>li>a { 
    color: #fff; 
} 
.nav>li>a:hover, .nav>li>a:focus { 
    background-color: #000066; 
} 
.navbar-blue .icon-bar { 
    background-color: #fff; 
    height: 4px; 
} 
.redbar { 
    background-color: #ff0000; 
    color: #fff; 
    height: 50px; 
    padding: 0 15px; 
    margin-bottom: 15px; 
} 
.redbar>p { 
    text-align: center; 
} 
@media (min-width: 768px) { 
    .logo { 
     height: auto; /*or whatever height you want it*/ 
    } 
    .redbar { 
     margin-bottom: 75px; 
    } 
    .redbar>p { 
     max-width: 500px; 
    } 
} 

Так вот я использовал довольно основные Navbar, что я вырезать и вставить из док. Затем я добавил класс .navbar-fixed-top, чтобы он был прикреплен к верхней части окна просмотра. Как описано в документе, я добавил некоторые дополнения к верхней части тела, чтобы настроить для использования класса navbar-fixed-top. Затем я удалил посторонние ссылки, которые были в примере, и заменил ваши ссылки в ul, на котором был класс .navbar-right, который плавает ссылки справа от навигационной панели.

Оттуда я заменил навигационную марку логотипом и дал ему абсолютное позиционирование, чтобы оно было «сверху» других элементов, размером с него для мобильного вида и использовало мультимедийный запрос для управления это размер, когда в окне просмотра было больше 768 пикселей (не забудьте сначала подумать о мобильных устройствах). Я также дал элемент внутри навигационной панели, который имеет относительное положение класса .container, чтобы логотип соответствовал внутренней стороне контейнера слева.

Далее я создал пользовательский класс .navbar-blue и создал его, чтобы иметь цвета, которые примерно соответствовали вашему изображению. Я просто скопировал стили .navbar-default из файла bootstrapcss и изменил цвета, но обычно я бы использовал LESS для настройки моих цветов. Если вы уже знаете LESS или SASS, вам понравится поддержка, которую предлагает Bootstrap для обоих.

Наконец, я только что создал красную полосу с некоторыми основными стилями: сделан и вычищен.