I've been working with bootstrap for a few years now and I've never had the issue I'm currently having. Right now I'm having an issue with the 768px breakpoint not collapsing the navbar like it should. I'm using BS 3.3.5 minified css. It will collapse the navbar at 767px. I've started my own queries but it's bootstrap that's not allowing the navbar to collapse. I promise I know what I'm doing. But this is the first time the BS breakpoints aren't working. I looked at the unminified files and it's saying the break point is 767px but I don't understand why it would have changed from 768px in BS 3.3.2. When I put it to 767px all my columns are pulling the -xs instead of -sm but at 768px it pulls the right column size but it's not collapsing the navbar.
my navigation.
<div id="main-nav">
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-navbar" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div><!-- end of navbar header -->
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse container" id="main-navbar">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Our Story</li>
<li>Sausage</li>
<li>Pork</li>
<li>Beef</li>
<li>Country Store</li>
<li>Blog</li>
<li>Recipes</li>
<li>Locations</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div><!-- end of main-nav -->
Related
I have a bootstrap navbar but it is not opening the menu list when clicked. The issue started occuring when I tried to change the breakpoint as my menu list was overflowing. Please have a look at the code. I feel the issue is occuring with the css part
http://jsbin.com/wadazijute/edit?html,css,output
Please check the image below.
Toggle appears after the screen width is 768px but I want the toggle to appear before that to avoid the navigation menu to appear like this:
http://imgur.com/QZzAMKz "navbar issue"
The code for a working collapse is:
<nav class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#myCarousel">Pinak Das</a>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Education</li>
<li>Technical Skills</li>
<li>Experience</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
No extra CSS required.
Working example at JSFiddle
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-brand"><img src="../images/logo.png" class="logo"></div>
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li>ABOUT</li>
<li>SOFTWARE & WEB DEVELOPMENT</li>
<li>GAME DEVELOPMENT</li>
<li>ARTS & DESIGNS</li>
<li>CONTACT US</li>
</ul>
</div>
</div>
</div>
Hi i need help with my bootstrap navbar, whenever I minimize or maximize my webpage, the navbar header i made keeps resizing. what code should i add and/or change in order to make the size consistent? P.S. my image wont resize as well, stuck in the same size and hides my carousel if the window size is small.
Fullscreen
Smaller
Create whit layoutit
get element f12 or save whit login
There are quite a few posts here about changing the Bootstrap CSS to make the header non-responsive.
But I have two headers, only one of which I want to be non-responsive, so I don't want to change it as a class:
One header has a login form, it works fine and collapses responsively exactly how I want it to.
The other is for a logged-in user and only has one link to log out, and I want to make this non-responsive. Here's how it looks now as the browser width changes, which is obviously not ideal:
And here's the code for the header I'd like to make non-responsive:
<nav class="navbar navbar-inverse navbar-fixed-top identHeader8">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="dashboard.html">[logotype]</a>
</div>
<div id="logout_navbar">
<ul class="nav navbar-nav pull-right collapse in">
<li>
Log out
</li>
</ul>
</div>
</div>
</nav>
Thanks in advance for any help you can provide.
You can use Non-nav Links (See Docs) and place it inside the header after the navbar-brand in this example.
<p class="navbar-text">Log In</p>
You can adjust to where is needed with your own CSS rules.
See example Snippet.
body {
padding-top: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <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="#">[logotype]</a>
<p class="navbar-text">Log In
</p>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>Log out
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<img src="http://placehold.it/2050x850/ff0/fff" class="img-responsive">
I know this is fairly simple but I got stuck trying to hide the Bootstrap main navbar on screens greater than 768px.
I don't want to hide the <nav> tag. I just want to hide the <div class="collapse navbar-collapse navbar-default custom-menu" id="navbar-collapse-1">...</div>
jsFiddle
<nav class="navbar-blue" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header navbar-default">
<button type="button" class="navbar-toggle navbar-menu" data-toggle="collapse" data-target="#navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- User menu to show on screens < 768px -->
<div class="collapse navbar-collapse navbar-default custom-menu" id="navbar-collapse-1">
<ul class="nav navbar-nav client-nav navbar-right">
<li>My Profile</li>
<li>Account Settings</li>
<li>Sign Out</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
Two things affecting your ability to control this style
The style that sets the display:block for the navbar uses !important. You need to override that with your own !important rule
The style you are using has lower specificity than the one that is making it display:block. The style in effect is .navbar-collapse.collapse (two classes specified), whereas yours is simply .custom-menu (only one class).
To remedy both of these you need a rule similar to this:
#media only screen and (min-width : 768px) {
.navbar-collapse.custom-menu {
display: none!important;
}
}
That will cause the menu to be hidden at those sizes.
Demo: http://jsfiddle.net/4jgL2hfy/
The links within my site's header/navigation aren't working for some reason. I think it has something to do with the CSS I am using but I have followed the code exactly like it is on Bootstrap's documentation site. Can someone help me fix this error?
You can view the full site here: http://kaybesee.com/mb
Here is my HTML:
<div id="nav-wrapper">
<nav class="navbar" role="navigation" data-spy="affix" data-offset-top="1000" data-offset-bottom="200">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
<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="#"><img src="img/logoTextRight.png" class="img-responsive"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="" id="navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="nav-button">Portfolio</li>
<li class="nav-button">About Us</li>
<li class="nav-button">Contact</li>
</ul>
</div><!-- /.navbar-collapse -->
</div>
</nav>
</div><!-- #nav-wrapper -->
Believe this is related, you have a e.preventDefault on your li click line 36 on your index. I don't really see a reason for that, but since your anchor is inside, the anchor click event never fires.
Remove e.preventDefault();
$('ul.nav > li').click(function (e) {
e.preventDefault();
You Should Match the Page ID with the Tab ID in the CSS . I think there is some bug with bootstrap nav class.
See this article for more information. http://webdesign.about.com/od/layout/a/aa042307.htm .