CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
winixxee
winixxee

Reputation: 564

how to have two navbars?one with the default bootstrap navbar and the other header under that navbar

I have a default bootstrap navbar, and I want some header right below that navbar.

Any help would be appreciated.

Upvotes: 1

Views: 108

Answers (2)

I wrestled a bear once.
I wrestled a bear once.

Reputation: 23379

Here's how they did it on the linked site..

     <div id="sub-header" class="green-header">
         <div class="inner-wrap clearfix">
            <h1>A Community Where Golfers Share, Discover and Discuss All Things Golf</h1>
            <ul>
               <li><a href="/signup/" title="Join the Community" class="join-button">Join the Community</a></li>
               <li>or <a href="/signin/">Sign in</a></li>
            </ul>
         </div>
      </div>

Css...

#sub-header {
    background: #2c3036 none repeat scroll 0 0;
    color: #d9d9da;
}
.green-header {
    background: #277f6d url("/assets/images/green_sub_bg.png") repeat-x scroll left top !important;
    color: #eaf6f4 !important;
}
* {
    box-sizing: border-box;
}
*::-moz-placeholder {
    color: #ccc;
}
body {
    color: #444;
    font: 100%/1.5 "Open Sans",Helvetica,Arial,sans-serif;
}

Upvotes: 1

hungerstar
hungerstar

Reputation: 21685

Is there a reason this structure doesn't work? It's what your reference site is doing.

<div id="header">
   <!-- navigation markup here -->
</div>
<div id="sub-header">
   <!-- sub header markup here -->
</div>

All you really need to do is place a block level element after your navigation container element. Basic markup really.

Upvotes: 1

Related Questions