Bootstrap 3 Complicated Nav Bar - A Toughie

Question

After two years coding in CSS, I've decided to tackle my next project using Bootstrap 3. Most everything is going smoothly except for my nav bar, whose design isn't that usual (please see below). I'm having difficulty making it responsive.

When it's a mobile phone, I want to display the logo small at the left and the burger icon to the right. Then I want the red box with the tagline below it. But I can't seem to get it to collapse like that.

Here's my basic code. I have left off my efforts to make it responsive since those have failed and would only confuse people.

Can anyone think up a solution? Thanks!

<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

Try not to make it more complicate than it needs to be. Start with the standard mark up and add the Bootstrap classes to make it as close as you can to your design. Then layer in your customizations.

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

So here I used a pretty basic navbar that I cut and pasted from the doc. Then I added the .navbar-fixed-top class to make it stick to the top of the viewport. As described in the doc, I added some padding to the top of the body to adjust for using the navbar-fixed-top class. I then removed the extraneous links that were in the example and substituted your links in the ul that had the .navbar-right class on it, which floats the links to the right of the navbar.

From there, I replace the navbar-brand with a logo image and gave it absolute positioning so that it would be "on top" of the other elements, sized it for the mobile view, and used a media query to control it's size when the viewport was more than 768px (remember to try to think mobile-first). I also gave the element inside the navbar that has the .container class position relative so that the logo would align to the inside of the container on the left.

Next, I created a custom class called .navbar-blue and styled it to have the colors that roughly matched your image. I just copied the .navbar-default styles out of the bootstrapcss file and changed the colors, but normally I would use LESS to customize my colors. If you know LESS or SASS already, you'll love the support that Bootstrap offers for both.

Lastly, I just created the red bar with some basic styles: done and dusted.