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.
Related
<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
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
I'm using bootstrap to create a responsive navigation, and I'm using one of the icons that bootstrap provides to create a show/hide menu. The problem is that it is displaying the arrow on a different line. Is there a way to display the arrow next to the text on one line?
Here is a demo: http://jsfiddle.net/0L6g87h2/
Here's the code that is accompanied with this fiddle to make this self contained:
<div class="container">
<div class="row">
<div class="col-sm-3 col-md-3 col-lg-2">
<div class="sidebar-nav">
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-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>
<span class="visible-xs navbar-brand">Left Navigation</span>
</div><!--/.navbar-header -->
<div class="navbar-collapse collapse sidebar-navbar-collapse">
<nav id="leftNav" role="navigation" aria-label="Left Navigation">
<!-- TemplateBeginEditable name="Left Navigation" -->
<ul class="nav navbar-nav">
<li>Home</li>
<li><strong>Cars</strong>
</span>
<ul id="ELP">
<li>BMW</li>
<li>Honda</li>
<li>Toyota</li>
</ul>
</li>
</ul>
</nav> <!-- /Left Navigation -->
</div>
<!--/.nav-collapse -->
</div> <!--/.navbar-default -->
</div> <!--/.sidebar-nav -->
</div> <!--/.col-sm-3 col-md-3 col-lg-2-->
You can include the icon span within the a element. Updated fiddle
<a href="">
<strong>Cars</strong>
<span class="glyphicon glyphicon-circle-arrow-right"></span
</a>
You can also use bootstrap's pull-left and pull-right classes. Updated fiddle
<a href="" class="pull-left">
<strong>Cars</strong>
</a>
<a href="" class="pull-right">
<span class="glyphicon glyphicon-circle-arrow-right"></span>
</a>
You can wrap the two elements within a span and set the span to display:inline or inline-block.
<span style="display:inline-block;">
<strong>Cars</strong>
<a href="#ELP" class="expander" >
<span class="glyphicon glyphicon-circle-arrow-right"></span>
</a>
</span>
http://jsfiddle.net/0L6g87h2/2/
Try this...
<a href="#">
<span class="glyphicon glyphicon-chevron-right"></span> Demo
</a>
I have this dropdown menu which works great:
<div class="btn-group pull-left">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
<i class="icon-map-marker icon-large"></i> Change Site
<span class="caret"></span>
</a>
<ul class="dropdown-menu" id="arSiteList">
<li>
<a href='#'><b>Select a site</b></a>
</li>
<li class="divider"></li>
</ul>
</div>
When the list of dropdown items is longer than the screen, scrolling the mouse wheel will scroll down through the list of items. This is perfect.
However, when I moved the dropdown menu into the nav bar, it stopped working:
<div class="navbar navbar-fixed-top" >
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="http://portal.parworksapi.com/ar/mars/portal/developer">PAR Works</a>
<div class="btn-group pull-left">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
<i class="icon-map-marker icon-large" ></i> My Sites <span class="caret"></span>
</a>
<ul class="dropdown-menu" id="arSiteList" style="overflow: scroll;">
<li><a href='#'><b>Select a site</b></a></li>
<li class="divider"></li>
</ul>
</div>
</div>
</div>
The dropdown still opens, but when the list of items is too long it's impossible to scroll through them.
How can I make scrolling work inside the nav bar?
Check all parent elements of your menu on existing "overflow: hidden;" property in CSS
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.