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.
Related
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.
<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
I have a functioning bootstrap navbar through use of ui.bootstrap of Angular-UI. For the mobile navbar, I want the navbar to collapse when a link is clicked. The toggle button functions as expected, but I can't get the ng-click="isCollapsed = !isCollapsed" to work on the nav links.
<div class="navbar navbar-default navbar-fixed-top" ng-controller="NavbarCtrl">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" type="button" ng-click="isCollapsed = !isCollapsed">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
App
</div>
<div collapse="isCollapsed" class="navbar-collapse collapse" id="navbar-main">
<ul class="nav navbar-nav">
<li ng-repeat="item in menu" ng-class="{active: isActive(item.link)}">
<a ng-href="{{item.link}}" ng-click="isCollapsed = !isCollapsed">{{item.title}}</a>
</li>
</ul>
</div>
</div>
</div>
In my controller, the applicable code is:
$scope.isCollapsed = true;
I had the same issue. Not sure if this is the best solution but I just added this in the main controller:
$rootScope.$on('$stateChangeStart', function(event, toState){
$scope.navbarCollapse = true;
});
It doesn't exactly do what you ask, because it's not triggering the collapse on click event. But it does trigger the collapse on each state change which for this purpose is the same.
<div class="header">
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle" aria-expanded="true">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="../" class="navbar-brand logo">
<img src="../images/logo.png">
</a>
</div>
<div id="navbarCollapse" class="navbar-collapse menu menu-horizontal collapse in" aria-expanded="true">
<ul>
<li>
Home
</li>
<li>
test
</li>
<li>
Home
</li>
<li>
test
</li>
</ul>
</div>
</div>
When my child div class as "collapse in" I have to add the class above button class as a "navbar-toggle-active".
When my child div class as "collapse" I have to add the class above button class as a "navbar-toggle".
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>