Twitter Bootstrap 3 Navbar collapse bug - html

Good day guys, I had a bit trouble in the collapse navbar. It doesn't align to the right side of the browser when i clicked the collapse button?
<div class="navbar navbar-inverse navbar-static-top">
<div class="container">
My Site
<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>Home</li>
<li>About</li>
<li>Contacts</li>
<li class="dropdown">
Login<b class="caret"></b>
<ul class="dropdown-menu">
<li>Logout</li>
<li>Logout</li>
<li>Logout</li>
</ul>
</li>
</ul>
</div>
</div>
Sample output


You must use navbar-header, then you have brand and hamburger icon on the same level and the whole content of your menu below that line. So basically your code should look something like that:
<div class="navbar-header">
My Site
<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>
Link to live example: http://www.bootply.com/jowa705iHl
Here you can find all the needed documentation: http://getbootstrap.com/components/#navbar
Best of luck :)


You need to wrap the collapse button and brand link in .navbar-header:
<div class="navbar navbar-inverse navbar-static-top">
<div class="container">
<div class="navbar-header">
<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>
My Site
</div>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>About</li>
<li>Contacts</li>
<li class="dropdown">
Login<b class="caret"></b>
<ul class="dropdown-menu">
<li>Logout</li>
<li>Logout</li>
<li>Logout</li>
</ul>
</li>
</ul>
</div>
</div>

Related

bootstrap respionsive design collapse menu

i'm stuck. pleasw help. why my collapse menu button doesnt expand when pressed?
https://codepen.io/aalis/pen/egmmeW
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class=" navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">My portfolio page</a>
</div>
<div class="collapse navbar-collapse navbar-right" id="myNavbar">
<ul class="nav navbar-nav">
<li>Home</li>
<li>My works</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>

https://codepen.io/anon/pen/QdwyEW
You missed placing bootstrap js file in your pen.
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js
Add this in your javascript settings and it will work

bootstrap navbar doesnt align as expected when toggled

Why is the <ul> elements does not align properly(the home active link should and the rest of the toggled link should be under brand) as seen on the image.
The Code:
<div class="navbar navbar-inverse navbar-static-top">
<div class="container">
Sample Brand
<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 class="active">Home</li>
<li>Blog</li>
<li>Social Media</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>

after i show the tuturial there is problem with bootsrap css .
the button has float:right element and we need to clear it.
please add class to your css file
.clear{
clear:both;
}
then use your code with this class
<div class="navbar navbar-inverse navbar-static-top">
<div class="container">
Sample Brand
<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 clear">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>Blog</li>
<li>Social Media</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
fiddle here -
https://jsfiddle.net/05aah0tb/

How do I get two nav bars, one after the other, to be static and also snap to the top?

I have 2 nav bars that I want both the be at the top of the page initially but upon scrolling I want the first nav bar with the brand image to collapse away and the second nav bar with the list links to snap to the top of the page where the first nav bar initially was. Does anyone know how I can do this? Here's an image for reference:
HTML:
<!----- Navbar ----->
<nav class="navbar navbar-default navbar-collapse">
<div class="container">
<div class="navbar-header">
<div class="navbar-header">
<img id="brand-image" alt="DEVO Logo" src="/Applications/MAMP/htdocs/D0.1/images/DEVOorig.png"/>
</div>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li></li>
<li><span class="glyphicon glyphicon-user"></span></li>
<li><span class="glyphicon glyphicon-shopping-cart"></span></li>
<li>
<div class="form-group form-inline">
<input type="text" class="form-control" placeholder="Search products..">
</div>
<button type="submit" class="btn btn-secondary" id="product-search-btn"><span class="glyphicon glyphicon-search"></button>
</li>
</ul>
</div>
</div>
<nav class="navbar navbar-inverse navbar-fixed-top" id="info-head">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Tobi's Site</a>
</div>
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>About Us</li>
<li>FAQ's</li>
<li>Contact Us</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Work With Us <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Drivers</li>
<li>Partners</li>
<li>In House</li>
</ul>
</li>
<li>T's & C's</li>
<li>Privacy Policy</li>
</ul>
</div>
</div>
</div>
</nav>

Use the Bootstrap affix component to pin the 2nd navbar when the page is scrolled. Then add the CSS for the affix class to position the navbar when it's pinned to the top.
$('#nav2').affix({
offset: {
top: 50
}
});
2 navbars example: http://codeply.com/go/hi6zhTU4h2

Bootstrap Navbar-collaps not opening on click

I am trying to use bootstrap Navbar-collaps menu for my Mobile.site.master page but it seems to be having problems, the button is where I want it its just on click the menu doesn't actually open and I don't know why any help would be amazing. The code is posted below if you need anything else please let me know.
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<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>
<a class="navbar-brand" href="#">BRAND</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li>
Fixed Link
</li>
</ul>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>L1</li>
<li>L2</li>
</ul>
</div>
</div>

You should use an ID in your menu div <div class="collapse navbar-collapse" id="MenuID"> and call it in your button data-target="#MenuID"
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#MenuID" 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="#">Brand</a>
</div>
<div class="collapse navbar-collapse" id="MenuID">
<ul class="nav navbar-nav">
<li class="active">L1 <span class="sr-only">(current)</span></li>
<li>L2</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Fixed Link</li>
</ul>
</div>
</div>
</nav>
You can see the result here bootply

one change in your code you forget href " second link
<ul class="nav navbar-nav">
<li>L1</li>
<li>L2</li>
</ul>
your code is working now
may be you included this file ?
bootstrap.css
jquery library
bootstrap.js
https://jsfiddle.net/k60f4x3c/

I had to reinstate a backup of my project and while using Github it deleted one of the JS files needed to make the dropdown work, there wasn't actually an error in my code just some of it had gone missing.

Wrong display dropdown menu (mobile) bootstrap

my problem is on this pic:
On mobile view have the same dropdown list like normal screen.
Code Here:
<nav class="navbar navbar-default box-centered" role="navigation">
<div class="container-fluid menu-box">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">"logo here"</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav nav-justified menu" style="margin:0 auto;">
<li class="dropdown">
List ext <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li class="text-padding">something</li>
<li class="text-padding">other</li>
</ul>
</li>
<li class="text-padding">Two</li>
<li class="text-padding">Three</li>
<li class="text-padding">Fouuur</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
My classes for those elements from stylesheet:
http://pastebin.com/HUUShLNQ
I want to menu look like this, with each element under previous:
Can you help me solve this?

check this fiddle:
https://jsfiddle.net/1ummyodw/1/
you have removed navbar-nav class from navigation ul so if you add that this will work, Updated HTML snippet:
<nav class="navbar navbar-default box-centered" role="navigation">
<div class="container-fluid menu-box">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">"logo here"</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav nav-justified menu" style="margin:0 auto;">
<li class="dropdown">
List ext <span class="caret"></span>
<ul class="dropdown-menu text-center" role="menu">
<li class="text-padding">something</li>
<li class="text-padding">other</li>
</ul>
</li>
<li class="text-padding">Two</li>
<li class="text-padding">Three</li>
<li class="text-padding">Fouuur</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>