how customize bootstrap default top fixed nav like one in image below? - html

Question

I am trying to customize bootstrap default fixed top nav to make it like one in images below. I am using latest twitter bootstrap 3.1.1. If you know please help me. You can even help me with any repository for it. The one in image is from i purchased which is using bootstrap 2x but i want to update it to 3x and use it in another template.
<div class="topHeaderSection">
<div class="header">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html"><img src="assets/custom/img/logo.png" alt="My web solution" /></a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li class="dropdown">
Services <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
</ul>
</li>
<li>About us</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>

Answer 1

You need to take your dropdown button out of the div with the collapse class, and put it into the navbar-header div. Then create an additional navbar-header for the application title.
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Title - manually pull it left-->
<div class="navbar-header pull-left">
#Html.ActionLink("Application name", "Index", "Home", null, new { #class = "navbar-brand" })
</div>
<!-- Buttons that won't collapse - and manually pull right-->
<div class="navbar-header pull-right">
<!-- Your drop down button that is not part of the collapse group -->
<ul class="nav pull-left">
<li class="dropdown pull-right">
Services <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
</ul>
</li>
</ul>
<!-- The normal bootstrap button to show collapsed menu items -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Regular collapsed items -->
<div class="navbar-collapse collapse navbar-right">
<ul class="nav navbar-nav pull-right">
<li>About us</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
Check out this answer to a similar question: https://stackoverflow.com/a/22978968/1721571.
Included in this answer is a link to a fiddle which should help you. I tried it out and it worked well without any changes.
Here's the link if you want to jump straight in. Fiddle: http://jsfiddle.net/nomis/n9KtL/1/
UPDATE
Your additional requirements may require some JavaScript. From my understanding you want the navbar to be static until the user scrolls down to the point where the navbar reaches the top of the window. Then you want it to be fixed.
Add your Contact div above the first navbar element. I have made it a navbar-default so the difference is more clear. You don't have to use the bootstrap nav or container classes. You can create your own and get the style to your liking:
<div class="navbar navbar-default navbar-static-top" style="margin-bottom:0px" role="navigation">
<div class="container">
<div class="text-info">Small div with contact information</div>
</div>
</div>
Now change the original navbar to static to start off with. We will also give it a menu class so we can select it with jQuery:
<div class="navbar navbar-inverse navbar-static-top menu" role="navigation">
For the JavaScript:
$(document).ready(function () {
var menu = $('.menu');
var origOffsetY = menu.offset().top;
function scroll() {
if ($(window).scrollTop() >= origOffsetY) {
$('.menu').addClass('navbar-fixed-top');
$('.body-content').addClass('menu-padding');
} else {
$('.menu').removeClass('navbar-fixed-top');
$('.body-content').removeClass('menu-padding');
}
}
document.onscroll = scroll;
});
Notice how I have added a class to the body-content, this stops the content disappearing behind the navbar-fixed when it changes class.
.menu-padding {
padding-top: 80px;
}
Here is the complete fiddle: http://jsfiddle.net/seanobr/wsNYQ/