How come the data-toggle doesn't work? The menu stay open when pressed! Looking to get it to close! Any ideas?
I'm not sure what else to do!! Thanks
<!-- main nav -->
<nav id="navbar-collapse" class="collapse in navbar-collapse navbar-right" role="navigation">
<ul id="nav" class="nav navbar-nav">
<li><a style="color: #9d9d9d;" href="#body">Home</a></li>
<li><a style="color: #9d9d9d;" href="#about">About</a></li>
<li><a style="color: #9d9d9d;" href="#portfolio">Screenshots</a></li>
<li><a style="color: #9d9d9d;" href="#testimonials">Testimonials</a></li>
<li><a style="color: #9d9d9d;" href="#price">Features</a></li>
<li><a style="color: #9d9d9d;" href="#contact">Contact</a></li>
<li><a style= "background-color: #2a7ead; color: #fff;"href="#yo">Buy Now</a></li>
</ul>
</nav>
<!-- /main nav -->
<div class="navbar-header" >
<!-- responsive nav button -->
<button type="button" class="navbar-toggle" 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>
<!-- /responsive nav button -->
<!-- logo -->
<img style="padding-left: 7px;" src="img/logo.png" alt="logo">
<!-- /logo -->
</div>
Related
How do I transfrom a normal menu in a dropdown menu when the page is accessed by a small device? My code it's like this, it's responsive but I don't know how to implement this kind of menu. I wanted to put that 'hamburger menu'.
Ps: I can't modify the html
HTML updated:
<div id="pai" class="row">
<div class="col-xs-12 col-xs-10">
<div class="menu">
<nav>
<div class="navbar-default" style="background-color: rgba(249,211,0,1.00);">
<div class="container-fluid">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" 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 class="collapse navbar-collapse" id="navbar-collapse">
<ul id="menu" class="nav navbar-nav">
<li class="LogoPosicao"> <img class="img-responsive" id="imagemBBlogo" src="BBomParaTodos.png" alt="Banco Do Brasil Logo"> </li>
<li><a class="Entenda" href="#" visibility="hidden">ENTENDA</a></li>
<li><a class="SemJuros" href="#" visibility="hidden">SEM JUROS</a></li>
<li><a class="Quebra">|</a></li>
<li id="telefoneC"><a class="tel" href="#"> <span class="glyphicon glyphicon-earphone"></span> (99) 9999-9999</a></li>
<li id="contatoLI"><a class="Contato" href="#Contato-Site" button type="button" data-toggle="button" aria-pressed="false" autocomplete="off">CONTATO</a></li>
</ul>
</div>
</div>
</div>
</nav>
</div>
</div>
Just did it.
:
<div id="pai" class="row">
<div class="col-xs-12 col-xs-10">
<div class="menu">
<nav>
<div class="navbar-default" style="background-color: rgba(249,211,0,1.00);">
<div class="container-fluid">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" 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 class="collapse navbar-collapse" id="navbar-collapse">
<ul id="menu" class="nav navbar-nav">
<li class="LogoPosicao"> <img class="img-responsive" id="imagemBBlogo" src="BBomParaTodos.png" alt="Banco Do Brasil Logo"> </li>
<li><a class="Entenda" href="#" visibility="hidden">ENTENDA</a></li>
<li><a class="SemJuros" href="#" visibility="hidden">SEM JUROS</a></li>
<li><a class="Quebra">|</a></li>
<li id="telefoneC"><a class="tel" href="#"> <span class="glyphicon glyphicon-earphone"></span> (99) 9999-9999</a></li>
<li id="contatoLI"><a class="Contato" href="#Contato-Site" button type="button" data-toggle="button" aria-pressed="false" autocomplete="off">CONTATO</a></li>
</ul>
</div>
</div>
</div>
</nav>
</div>
</div>
How to change data-offset-top for mobile view? Also, on click link doesn't hide the menu. I tried some founded code from stackoverflow but no luck. Could someone please help with this link below :
http://smalldesigncompany.com/client/agami/s4/index.html
<nav class="navbar navbar-default zero-mar" >
<div class="container">
<!-- 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=".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>
</div><!--NAVBAR-HEADER-->
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1 pull-left">
<ul class="nav navbar-nav">
<li>
<a class="scroll" href="#top">Home</a>
</li>
<li>
<a class="scroll" href="#people">Meet Our People</a>
</li>
<li>
<a class="scroll" href="#projects">Our Capabilities</a>
</li>
<li>
<a class="scroll" href="#process">Our Process</a>
</li>
<li>
<a class="scroll" href="#why">Why Agami</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="right">Projects</span></li>
<li><span class="right">Contact</span></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
</nav>
This answer might make think I oversimplify the thing, but often I see jquery/bootstrap scripts loaded twice, and that means two listeners waiting for the button toggle. The first one opens, the second one closes instantly.
Solution: look for scripts loaded twice via browser inspecting (F12) and remove where is convenient.
try this way
$('.navbar-nav a').on('click', function () {
$(".navbar-toggle").click() //bootstrap 3.x
});
Never use multiple IDs on same div
And for the navbar-toggle just use ID of your navbar-collapse menu in the data-target attribute of the navbar-toggle as:
data-target="#bs-example-navbar-collapse-1"
And for hiding the navbar-collapse menu again you have to trigger the click of your navbar-toggle button on the click of .navbar-nav > li > a as:
Code Snippet
$('.navbar-nav > li > a').on('click', function() {
$('.navbar-toggle').trigger('click');
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default zero-mar">
<div class="container">
<!-- 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">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!--NAVBAR-HEADER-->
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse pull-left" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
<a class="scroll" href="#top">Home</a>
</li>
<li>
<a class="scroll" href="#people">Meet Our People</a>
</li>
<li>
<a class="scroll" href="#projects">Our Capabilities</a>
</li>
<li>
<a class="scroll" href="#process">Our Process</a>
</li>
<li>
<a class="scroll" href="#why">Why Agami</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="right">Projects</span>
</li>
<li><span class="right">Contact</span>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
</nav>
$('.navbar-nav > li > a').on('click', function() {
$('.navbar-toggle').trigger('click');
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default zero-mar">
<div class="container">
<!-- 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">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!--NAVBAR-HEADER-->
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse pull-left" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
<a class="scroll" href="#top">Home</a>
</li>
<li>
<a class="scroll" href="#people">Meet Our People</a>
</li>
<li>
<a class="scroll" href="#projects">Our Capabilities</a>
</li>
<li>
<a class="scroll" href="#process">Our Process</a>
</li>
<li>
<a class="scroll" href="#why">Why Agami</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="right">Projects</span>
</li>
<li><span class="right">Contact</span>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
</nav>
I am working on the CSS dropdown below. It is working fine for the mobile version but for the desktop version it is creating a problem.
<div class="container">
<div class="navbar-header">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-6"> <a class="navbar-brand" href="#/home"><img src="img/logo.png" class="img-responsive" alt="Learn Education" title="Learn Education"/></a></div>
<button type="button" class="navbar-toggle" 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>
<div class="collapse navbar-collapse col-lg-6 col-md-6 col-sm-12 col-xs-7 pull-right" id="bs-example-navbar-collapse-1" style="border:none;border-radius:15px;">
<ul class="nav navbar-nav navbar-right changeme" id="visibid">
<li> Home </li>
<li>LogIn</li>
<li>SignUp</li>
<li class="dropdown">
Sample Test <b class="caret"></b>
<ul class="dropdown-menu">
<li>Mathematics</li>
<li>Physics</li>
<li>Chemistry</li>
</ul>
</li>
<li>Reports</li>
<li>About Us</li>
<li>Contact Us</li>
<li>DashBoard</li>
</ul>
</div>
</div>
Here is the Plnkr.
In order to see the error please switch to fullscreen mode and press any of those buttons.
add media queries
#media screen and (min-width: 768px) {
#bs-example-navbar-collapse-1{
display:none;
}
}
You need to remove data-target=".navbar-collapse" data-toggle="collapse" from all the links - this is causing the Bootstrap JS to try and collapse the menu
Here is my markup for my nav using bootstrap....
I'm not sure why the div with class of 'mynavbar' is not toggling open and close (by adding the 'in' class to it) when the button with a data-target='.mynavbar' is clicked (this is only on smaller screens where the hamburger type menu shows instead of the links "work, about, contact)
ALso, on large and small screens, should the li's that are clicked on have the class of "active" added to them? I'm not seeing this happen either
<nav class='navbar navbar-fixed-top drop-shadow'>
<div class='container-fluid'>
<div class='navbar-header page-scroll'>
<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 page-scroll' href='#'><i class='glyphicon glyphicon-home'></i></a>
</div>
<div class='collapse navbar-collapse mynavbar'>
<ul class='nav navbar-nav'>
<li><a class='page-scroll' href='#work'>Work</a></li>
<li><a class='page-scroll' href='#about'>About</a></li>
<li><a class='page-scroll' href='#contact'>Contact</a></li>
</ul>
</div>
</div>
</nav>
You need to target to ID in <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mynavbar">, instead of class. Then change the element that has collapse navbar-collapse class to <div class="collapse navbar-collapse" id="mynavbar">
Overall, this code should work for you
<nav class="navbar navbar-fixed-top navbar-inverse drop-shadow" role="navigation">
<div class="container-fluid">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle collapsed" 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 page-scroll" href="#">
<i class="glyphicon glyphicon-home"></i>
</a>
</div>
<div class="collapse navbar-collapse" id="mynavbar">
<ul class="nav navbar-nav">
<li class="active"><a class="page-scroll" href="#work">Work</a></li>
<li><a class="page-scroll" href="#about">About</a></li>
<li><a class="page-scroll" href="#contact">Contact</a></li>
</ul>
</div>
</div>
</nav>
And, you can add class="active" to your <li> when clicked, this is often handled in the server-side or in your own URL router
As you can see the content stays out of the = box on mobile and when the page is rescaled
My current HTML
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<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>
<a class="navbar-brand" title="Index" href="http://www.example.com">MP3Jungle</a>
<a class="navbar-brand" title="Singles" href="http://www.example.com/category/singles/">Singles</a>
<a class="navbar-brand" title="Singles" href="http://www.example.com/category/videos/">Videos</a>
<a class="navbar-brand" title="Singles" href="http://www.example.com/category/albums/">Albums</a>
<a class="navbar-brand" title="Singles" href="http://www.example.com/category/mixtapes/">Mixtapes</a>
</div>
<form class="navbar-form navbar-right" action="/" method="post" accept-charset="utf-8" role="search">
<div class="form-group">
<input type="text" name="s" id="s" class="form-control" placeholder="Search..."/>
</div>
</form>
</div>
</nav>
How can I get the content into the collapsed box? Thanks!
Bootstrap expects menu links to be a <ul> that you specify in the data-target of your collapsed button. It'll then take that UL and place it "under" the button in mobile version. Also, make sure that you're loading both the css and js for Bootstrap.
Compare to this working example:
Fiddle
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="active">Default <span class="sr-only">(current)</span></li>
<li>Static top</li>
<li>Fixed top</li>
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container-fluid -->
</nav>