bootstrap respionsive design collapse menu - html

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

Related

Twitter Bootstrap 3 Navbar collapse bug

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>

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/

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.

One page website navbar to highlight when on section (using bootstrap)?

I am using bootstrap and smoothscroll for my one page website. I am unsure how to get the section in the navbar to become active though if someone scrolls to it - any help on this? I know how to get it to highlight when clicked but not sure about position
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" 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>
<!-- nav bar -->
<div class="navbar-brand"><b>Merisa Lee</b></div>
</div>
<div class="navbar-collapse collapse" style="height: 1px;">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
<li>Work</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Resume</li>
</div><!--/.nav-collapse -->
</div>
</div>

how to make navbar overlaps content in bootstrap 3

I'm using the regular navbar of bootstrap not the fixed-top one, I figured out that when .navbar{position: fixed;} it overlaps, but that's not what I want. I want when I scroll down the menu stays on the top of the page not to move with the page and overlap the content when the menu collapses.
this is my code so far:
<div class="navbar-wrapper">
<div id="menu" class="navbar navbar-right navbar-default nob no-focus" 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="#">Project name</a> -->
</div>
<div class="navbar-collapse collapse ">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
this is what is happening now because is fixed-top
[http://es.tinypic.com/view.php?pic=fc0i6s&s=8#.U9itaON5Py4]
thanks in advance.

Try this, it will keep the navbar fixed rather than overlap once u start scrolling down.
<div class="navbar navbar-inverse navbar-fixed-top">
<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>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
Hope this helps :)