<nav class="navbar navbar-default" role="navigation" id="my-navbar">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-brand-centered">
<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="navbar-brand-centered navbar-brand ">
<a href="#" class="navbar-brand">
<img alt="Brand" src="assets/img/logo.png">
</a></div>
</div>
<div class="collapse navbar-collapse" id=" navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li> MyReservations
</li>
<li> +919986040064 </li>
<li> saritha#myotels.com
</li>
</ul>
</div>
</div>
</nav>
I am using this navbar. On resizing the window the toggle button appears but nothing happens on clicking on it. Is there is any coding mistake. I have included bootstrap.min.css and bootstrap.min.js and jquery.js files but still the problem is not resolved
You need to change the data-target to #navbar-collapse by the looks of it:
<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>
You were targeting a different element (#navbar-brand-centered) which is where your logo is located, not your menu...
data-target of <button> must be same with id of <div class="collapse navbar-collapse" and another way to resolve this issue, to change id:
<div class="collapse navbar-collapse" id="navbar-brand-centered">
it will work too!
jsfiddle-link
Related
When I try to open the menu on mobile, it does not open and instead, you just select the whole menu bar. It looks like this on the actual website: menu after being clicked on (clicked on the actual button in the right corner).
Meanwhile, this is the relevant code from the navbar.php:
<nav class="navbar navbar-default">
<div class='container'>
<div class="navbar-header">
<button type="button" id='navbar-toggle' 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 class="brand">
<img src="assets/img/logo.svg" alt="logo">
</div>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-left">
<li>Home</li>
<li>About</li>
<li>Services</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Contact Us</li>
</ul>
</div>
</div>
</nav>
Also, not sure if it makes a difference although the PHP file is named navbar.inc.php. And also, I'm not sure if it has to do anything with the jquery.js file.
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>
I'm using a bootstrap nav bar to navigate to certain elements on the same page. Thus, one of my list elements is
` <nav class="navbar navbar-inverse 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" 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="#"><img src="img/spi_logo.png" height=30 width=41></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li ><a href="#"><span class="glyphicon glyphicon-home"
aria-hidden="true"></span> Home</a></li>
<li><a href="#about"><span class="glyphicon glyphicon-info-sign"
aria-hidden="true"></span> About</a></li>
<li ><a href="#bio"><span class="fa fa-female"
aria-hidden="true"></span> Bio</a></li>
<!--<li><a id="contact">
<i class="fa fa-envelope"></i> Contact</a></li>-->
<li><a href="#faq"><span class="fa fa-question"
aria-hidden="true"></span> FAQ</a></li>
<li><a href="#quoteform"><span class="fa fa-dollar"
aria-hidden="true"></span> Quote</a></li>
</ul>
</div>
</div> <!-- end container -->
</nav> `
The navbar collapses nicely on an xs screen. I can click the toggle navigation icon bars, menu drops, and I can select an id element to jump to on the page. However, the menu does not toggle back up after choosing an id to jump to. I assume this is because a new page is not loading, but rather I'm just jumping down the page. So how can I configure the navbar to force it to toggle back up?
I think what you need is the answer of this question.
Using data attributes will do the trick.
This is the website here
When we view it minimized mode, the menu toggles ON after clicking the button, but when we click the button gain, it does not toggle off?
How to make this work ?
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<!-- FOR MOBILE VIEW COLLAPSED BUTTON -->
<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="index.html">Click<span>Desti</span></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul id="top-menu" class="nav navbar-nav navbar-right main_nav">
<li><b>Show Categories</b>       </li>
<li class="active">Home</li>
<li>About</li>
<li>Services</li>
<li>Team</li>
<li>Blog</li>
<li>Contacts</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
By using Twitter Bootstrap 3, I want to create an additional navbar for mobile.
In navbar I will put 2 toggle buttons in each side of bar. Left button will have classical "three bar" icon, and right button will have a different icon inside. I want right button to have ".glyphicon .glyphicon-comment" inside it. If the user clicks the button it will also toggle for second menu. I can toggle for the menu but icon can't be changed ?
I couldn't put any other icon inside right toggle button ? (I also need the "some link" text to be centered in navbar)
Fiddle: http://jsfiddle.net/mavent/WPfe3/2/
<nav class="navbar navbar-inverse navbar-fixed-top visible-xs" role="navigation" id="">
<div class="navbar-header">
<button type="button" class="navbar-toggle pull-left" data-toggle="collapse" data-target=".navbar-ex1-collapse"> <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 pull-right" data-toggle="collapse" data-target=".navbar-ex2-collapse"> <span class="sr-only">Toggle navigation</span>
<i class="icon-user"></i>
</button>
<a class="navbar-brand" style="text-align:center;" href="">Some link here centered</a>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<li class="active">
AAAA 1
</li>
<li class="active">
AAAA 2
</li>
<li class="active">
AAAA 3
</li>
</div>
<div class="collapse navbar-collapse navbar-ex2-collapse">
<li class="active">
BBBB 1
</li>
<li class="active">
BBBB 2
</li>
<li class="active">
BBBB 3
</li>
</div>
</nav>
You can achieve this by changing the icon span,
Instead of,
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
Use like,
<span class="glyphicon glyphicon-play" style="color:#fff"></span>
Demo
SEE THE DEMO HERE
You forget to add bootstrap-glyphicons.css in your jsfiddle demo.
Then Replace this
<i class="icon-user"></i>
With
<i class="glyphicon glyphicon-comment" style="color:#fff"></i>
And then to get your link in center you need to remove the class navbar-brand from your a tag. And then wrap your link with div and then apply text-align:center and some padding to get the link in center.