I'm trying out a simple bootstrap navbar. However, my data-toggle isn't working.
Here's the HTML:
<body>
<nav class="navbar navbar-default navbar-inverse navbar-fixed-top">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-target=".navbar-collapse" data-toggle="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>Meet the Team</li>
<li>Get Involved</li>
<li>Contact Us</li>
</ul>
</div>
</nav>
</body>
<nav class="navbar navbar-toggleable-md navbar-inverse navbar-fixed-top">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-controls="navbar-collapse"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li>Meet the Team</li>
<li>Meet the Team</li>
<li>Get Involved</li>
<li>Contact Us</li>
</ul>
</div>
</nav>
The problem was the data-target=".navbar-collapse".
Dots only belong to classes. You have to use # and an id for the collapsible part <div class="collapse navbar-collapse" id="navbar-collapse">
The bootstrap doc is pretty good. You will find it here
Related
I wrote a code of a toggle button to be seen when the screen size of the
browser is reduced on the navbar using bootstrap4 but the button is not
showing please what is wrong with my code:
<nav class="navbar navbar-expand-lg">
<button class="navbar-toggler " data-toggle="collapse" data-
target="#navbarcollapse">
<span class="navbar-toggler-icon" ></span>
</button>
<div class="collapse navbar-collapse" id="navbarcollapse">
<ul class ="navbar-nav mr-auto">
<li class="nav-item active">Home</li>
<li>Services</li>
<li>Downloads</li>
<li>Projects</li>
<li>About Us</li>
<li>Contact</li>
</ul>
</div>
</nav>
Just added bg-light navbar-light and the button was visible.
<nav class="navbar navbar-expand-lg bg-light navbar-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarcollapse">
<span class="navbar-toggler-icon" ></span>
</button>
<div class="collapse navbar-collapse" id="navbarcollapse">
<ul class ="navbar-nav">
<li class="nav-item">Home</li>
<li class="nav-item">Services</li>
<li class="nav-item">Downloads</li>
<li class="nav-item">Projects</li>
<li class="nav-item">About Us</li>
<li class="nav-item">Contact</li>
</ul>
</div>
</nav>
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>
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
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/
I have created this menu for my needs. It is responsive, since I'm using bootstrap, and it is custom, because i needed 2 rows for the right side of the menu. What I need is, how can I have toggle-navigation for lower resolutions than 768x1280? This is how the menu is created:
<nav class="navbar navbar-fixed-top" role="navigation">
<div class="container">
<div class="row col-xs-4">
<ul class="nav navbar-nav">
<li><img src="img/logo.png"></li>
</ul>
</div>
<div class="row col-xs-8" >
<div class="row col-xs-12">
<ul class="nav navbar-nav navbar-right">
<li> </li>
<li> </li>
</ul>
</div>
<div class="row col-xs-12">
<ul class="nav navbar-nav navbar-right" >
<li>Home</li>
<li>About Us</li>
<li><a href="#" >Projects</a></li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</nav>
I think that following example is ok for your needes:
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menu1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menu2">
<span class="sr-only">Toggle navigation2</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<li><img src="img/logo.png"></li>
</div>
<div class="row col-xs-8 pull-right">
<div class="navbar-collapse collapse pull-right" id="menu1">
<ul class="nav navbar-nav">
<li> </li>
<li> </li>
</ul>
</div><!--/.nav-collapse -->
</div>
<div class="row col-xs-12 pull-right">
<div class="navbar-collapse collapse pull-right" id="menu2">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About Us</li>
<li><a href="#" >Projects</a></li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
You should add button like this where headerCol is id of your div which contains elements you want to collapse. I'm sorry for my bad english. I'll give you example:
This is my header navbar:
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#headerCol">
<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">MYSITE</a>
</div>
<div class="navbar-collapse collapse pull-right" id="headerCol"><!-- start nav-collapse -->
{% block headernav %}
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About us</li>
<li>Questions</li>
<li>Contacts</li>
</ul>
{% endblock %}
</div><!-- end nav-collapse -->
</div>
</div>