Static Nav Bar with Bootstrap - css

I want to make the Menu Bar stick to the top when the user scrolls. I used to use Bootstrap's class called 'navbar-fixed-top' and it works fine.
But the user wants to add some brands and logos above the Nav bar. But they don't want those logos to stick to the top when the user scrolls. They want to stick only the Nav bar below those logos.
I tried to use 'navbar-fixed-top' but it appears on the Logos instead of below the Logos.
My HTML:
<div class="container">
<nav class="col-md-12 text-left">
// Code for Logos and Images
</nav>
</div>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>.....</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
How can I make the nav-bar stick to the top (not the logos)?


First remove navbar-fixed-top from NAV tag and put this code in head tag
<script>
$(window).scroll(function() {
var height = $(window).scrollTop();
if(height <= 100) {
$("nav").addClass("navbar-fixed-top");
}
if(height <= 10) {
$("nav").removeClass("navbar-fixed-top");
}
});
</script>

Related

Bootstrap right navibar messy how to fix this?

I am trying to add the
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Mean Office</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li>Other contacts</li>
<li ng-if="main.loggedIn"><a ng-href="#" ng-click='main.doLogout()'>Logout</a></li>
</ul>
</div>
</nav>
</div>
In the above example, my Logout button is going outside of the nav bar. what is wrong here? how to fix this?

You are taking navbar in side .container class and again the same container class taken after .navbar class as BOOTSTRAP container class have fixed width 1140px + 30px padding for large view so your navbar overflow outside it parent container.
[body > .container > .navbar > .container]
To resolve it you have to remove first .container and put <nav class='navbar'> directly to body tag and put container or container-fluid inside of navbar.
change to [body > .navbar > .container OR .container-fluid]
ONE MORE THING TO SAY
[Practice makes perfect]

It is not going outside of the navbar. You have nested two container. The padding in containerplays the part here.
<div class="container">
<nav class="navbar navbar-default">
<div class="container">
container in bootstrap is 1170px width having padding-right:15px , padding-left:15px .( I am viewing it in a screen resoultion > 1200px) .Your navbar have a total space of 1140px now (1170px - 30px = 1140px) which has a background colore property. As you again adding a container , It is occupying a space of 1170px now which exceeds 1140px. So in both side , a extra 15px white space gote added. Furher , The nested "navbar-right" has "margin-right:-15px" that push your nav further.
Simply construct this way :
<div class="container">
<nav class="navbar navbar-default">
<div class="navbar-header">
<a class="navbar-brand" href="#">Mean Office</a>
</div>
<div>
<ul class="nav navbar-nav navbar-right ">
<li>Other contacts</li>
<li ng-if="main.loggedIn"><a ng-href="#" ng-click='main.doLogout()'>Logout</a></li>
</ul>
</div>
</nav>
</div>

This is how a bootstrap navbar is made:
Navbar with no container wrapping it, but a container-fluid inside it:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Mean Office</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li>Other contacts
</li>
<li ng-if="main.loggedIn"><a ng-href="#" ng-click='main.doLogout()'>Logout</a>
</li>
</ul>
</div>
</nav>
P.S.: view the results in full page for better viewing

Bootstrap navbar link underline error

I typed following code. But i got underlined text. What is the my mistake?
<div class="navbar navbar-default navbar-static-top">
<div class="container">
Hi
</div>
</div>

Your text is actually a link (because it's in an <a> tag), and the CSS you are using probably says somewhere that links should be underlined. You can remove the underline by styling your link with this:
a.navbar-brand {
text-decoration: none;
}

The thing the Bootstrap navbar uses the listelement to make a list of items like links to make a button in the navbar of it.
In your case:
<div class="navbar navbar-default navbar-static-top">
<ul class="nav navbar-nav">
<li>
Hi
</li>
</ul>
</div>
would do the trick.
I set up a JSFIDDLE to show the result

Collapse Menu in Bootstrap3 without Toggle

Is there a Bootstrap3 component that simply collapses a menu at a breakpoint without adding a toggle. For example, if I have a horizontal menu that looks like this on desktop
at screen widths below 768px I would like it to simply stack without collapsing into a toggle like this
Any thoughts?

Remove the collapse button and the navbar-collapse class. From the getbootstrap.com examples, something like this should do the trick:
<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Project name</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
You will have to add a media query to make sure that padding is added to the content in mobile display.
I have made a Bootply here where I added the following CSS to make it work:
#media screen and (max-width: 768px) {
#wrap > .container {
padding-top:200px;
}
}

Aligning button and text in navbar in twitter bootstrap

I have written the following html with Bootstrap 2.3.2 included and no other css:
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
(...)
<div class="nav-collapse collapse">
<ul class="nav">
(...)
</ul>
<form id="login-form" class="navbar-form pull-right">
<span class="navbar-text">Hello, username!</span>
<button id="logout" class="btn">Log out</button>
</form>
</div>
</div>
</div>
</div>
How can I make it so that the log out button aligns with the text and .navbar correctly? Currently the button sticks to the bottom of the line, which is the bottom of the .navbar because of the .navbar-text.
The problem can be viewed here.

You can reset the button's margin via CSS:
.navbar .btn {
margin-top: 0;
}

Twitter Bootstrap - full width navbar

Following the example of TB, I have a navbar that is marked up as follows:
<div class="container">
<div class="navbar">
<div class="navbar-inner">
<!-- nav bar items here -->
</div>
</div>
</div>
I'd like this to span the full width of the screen and not have any rounded corners -- similar to static top styling of the navbar.
I can't seem to find how to do this in TB. If there isn't a way, what CSS would I need to override TB and not break responsiveness?

Just change the class container to container-fullwidth like this :
<div class="container-fullwidth">

Not sure if the navbar-static-top class was available prior to version 2.2.2 but I think you can accomplish your goal with the following:
<div class="navbar navbar-static-top">
<div class="navbar-inner">
<ul class="nav">
<li class="active">Test1</li>
<li>Test2</li>
<li>Test3</li>
<li>Test4</li>
<li>Test5</li>
</ul>
</div>
</div>
<div class="container">
...
</div>
I put together a jsFiddle as an example.

Put the navbar out of your container:
<div class="navbar">
<div class="navbar-inner">
<!-- nav bar items here -->
</div>
</div>
<div class="container">
</div>
EDIT:
Here is one that I did with responsive navbar. The code fits the document body:
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<!-- Be sure to leave the brand out there if you want it shown -->
<a class="brand" href="#">Project name</a>
<!-- Everything you want hidden at 940px or less, place within here -->
<div class="nav-collapse">
<!-- .nav, .navbar-search, .navbar-form, etc -->
<ul class="nav">
<li class="active">Home</li>
<li class="divider-vertical"></li>
<li>Link</li>
<li class="divider-vertical"></li>
<li>Link</li>
</ul>
<ul class="nav pull-right">
<li>Log out</li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="span12">
</div>
</div>
</div> <!-- end container -->
<script type="text/javascript" src="/assets/js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="/assets/js/bootstrap.min.js"></script>

I'm very late to the party but this answer pulls up top in Google search results.
Bootstrap 3 has an answer for this built in, set your container div in your navbar to container-fluid and it'll fall to screen width.
Like so:
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>More Stuff</li>
</ul>
</div>
</div>
</div>

Put your <nav>element out from the <div class='container-fluid'>.
Ex :-
<nav>
......nav content goes here
<nav>
<div class="container-fluid">
<div>
........ other content goes here
</div>
</div>

You need to push the container down the navbar.
Please find my working fiddle here http://jsfiddle.net/meetravi/aXCMW/1/
<header>
<h2 class="title">Test</h2>
</header>
<div class="navbar">
<div class="navbar-inner">
<ul class="nav">
<li class="active">Test1</li>
<li>Test2</li>
<li>Test3</li>
<li>Test4</li>
<li>Test5</li>
</ul>
</div>
</div>
<div class="container">
</div>

Just replace <div class="container"> with <div class="container-fluid">, which is the container with no margins on both sides.
I think this is the best solution because it avoids some useless overriding and makes use of built-in classes, it's clean.

You can override some css
body {
padding-left: 0px !important;
padding-right: 0px !important;
}
.navbar-inner {
border-radius: 0px !important;
}
The !important is needed just in case you link the bootstrap.css after your custom css.
And add your nav html out of a .container

To remove the border-radius on the corners add this style to your custom.css file
.navbar-inner{
-webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0;
}

I know I'm a bit late to the party, but I got around the issue by tweaking the CSS to have the width span 100%, and setting l/r margins to 0px;
#div_id
{
margin-left: 0px;
margin-right: 0px;
width: 100%;
}

You have to add col-md-12 to your inner-navbar. md is for desktop .you can choose other options from bootstrap's list of options . 12 in col-md-12 is for full width .If you want half-width you can use 6 instead of 12 .for e.g. col-md-6.
Here is the solution to your question
<div class="container">
<div class="navbar">
<div class="navbar-inner col-md-12">
<!-- nav bar items here -->
</div>
</div>
</div>

Resources