Bootstrap 3 Complex Nav Bar - A Toughie
After two years of coding in CSS, I decided to tackle my next project using Bootstrap 3. Most of it runs smoothly, except for my navbar, which is not that familiar in design (see below). I'm having difficulty with his responsive attitude.
When it's a mobile phone, I want to display a small logo on the left and a hamburger icon on the right. Then I want a red box with a stand underneath. But I can't make it crash like that.
Here is my basic code. I stopped my efforts to make it responsive because they failed and only confused people.
Can anyone come up with a solution? Thank!
<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;
}
source to share
Try not to overcomplicate your work. Start with standard markup and add Bootstrap classes to make this as close to your design as possible. Then a layer in your settings.
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 fairly simple navigator that I cut and pasted from the document. Then I added a class .navbar-fixed-top
so that it snaps to the top of the viewport. As described in the doc, I've added some additions to the top of the body to customize it to use the navbar-fixed-top class. Then I removed the extraneous links that were in the example and replaced your links in the ul, which had a class .navbar-right
that floats the links to the right of the navbar.
From there I replaced the navbar brand with the logo image and gave it absolute positioning so that it was "on top" of the other elements, sized for a mobile view, and used a media query to control its size when the viewport was larger than 768px (remember to think first about mobile devices). I also gave an element inside the nav that has a relative position of the class .container
so that the logo matches the inside of the container on the left.
Then I created a custom class called .navbar-blue
and styled it to match the colors in your image. I just copied the .navbar-default styles from the bootstrapcss file and changed the colors, but normally I would use LESS to customize my colors. If you already know LESS or SASS, you will love the support Bootstrap offers for both.
Finally, I just created a red stripe with some basic styling: done and cleaned.
source to share