<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav side-nav">
<li class="active"><i class="fa fa-dashboard"></i> Dashboard</li>
<li class="dropdown">
<i class="fa fa-caret-square-o-down"></i> Person <b class="caret"></b>
<ul class="dropdown-menu">
<li>Person list</li>
<li>Update Person</li>
</ul>
</li>
</ul>
</div>
When I click and am on "Person list" page, how to keep class="dropdown" stay opened.
I've been struggling to do that. If anyone knows, please share.
Related
I have a bootstrap nav bar. In which i have multiple drop-down items.
Now I have another div col-md-3.
In this div I want show the items of the dropdown which I hover. For now if i hover over a dropdown then the submenu is showed instead of clicking.
So how can I show the sub items of a drodown menu in that div ?
I want that subitems are in drop-down and also in that side bar div.
My Code is like this:
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- 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" 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>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Dashboard</li>
<li class="dropdown">
Administration <span class="caret"></span>
<ul class="dropdown-menu">
<li>Time Zone</li>
<li>Holidays</li>
<li>Working Hours</li>
<li> Promt Language</li>
<li>Phone No Allocation & Extensions</li>
<li>Speed Dial</li>
<li>Confernce Welcome Message</li>
</ul>
</li>
<li class="dropdown">Dial Plan<span class="caret"></span>
<ul class="dropdown-menu">
<li>Current Dial Plan</li>
<li>Caller ID Management</li>
<li>ISD Management</li>
<li>Block Number</li>
<li>Override</li>
<li>Location</li>
</ul>
</li>
<li class="dropdown">Routing<span class="caret"></span>
<ul class="dropdown-menu">
<li>24 Hours</li>
<li>Working Hours</li>
<li>OFF Hours</li>
<li> Location Based Routing </li>
</ul>
</li>
<li>Call Recording</li>
<li class="dropdown">
Users <span class="caret"></span>
<ul class="dropdown-menu">
<li>Add User</li>
<li>View Users</li>
</ul>
</li>
<li class="dropdown">
Voice Mail<span class="caret"></span>
<ul class="dropdown-menu">
<li>Default</li>
<li>For each user</li>
</ul>
</li>
<li class="dropdown">
Provisioning <span class="caret"></span>
<ul class="dropdown-menu">
<li>Manual Softphone Configuration</li>
<li>Add Deskphone</li>
<li>Devices</li>
<li>Edit</li>
<li>Delete</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<div class="container-fluid">
<div class="col-md-12" >
<!-- Side bar-->
<div class="col-md-3">
</div>
</div>
</div>
Your code is correct, however it seems you forgot to include jQuery in your code.
I created a Codepen using your code and I've included jQuery.js at the bottom just before including the Bootstrap library.
As you can see the dropdown items work fine and, as you remove the jQuery script from the code, you can reproduce your broken scenario.
Here is the link: Codepen Link
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
I am trying to align the selections in the navbar with the edges of the jumbotron, so that the rapidcodes logo aligns with the edge of the grey box in 'Newest Additions' and the 'login' button aligns with the right edge of the grey box.
See screenshot of current page:
Code:
td {
text-align: left;
vertical-align: central;
padding: 4px;
}
.products {
display: inline-block;
margin: 15px;
}
<nav class="navbar navbar-default" >
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="http://www.rapidcodes.co.uk"><img src="http://www.rapidcodes.co.uk/style/logo.png" width="200" height="25" alt="Logo"/></a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Xbox<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Games</li>
<li>Memberships</li>
<li>Gift Cards</li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">PlayStation<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Games</li>
<li>Memberships</li>
<li>Gift Cards</li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">PC<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Games</li>
<li>Time Cards</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</div>
</nav>
Try packing your code inside the external div with the class of 'container'.
<div class="container"><!--Pack your code inside the container-->
<nav class="navbar navbar-default" >
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="http://www.rapidcodes.co.uk"><img src="http://www.rapidcodes.co.uk/style/logo.png" width="200" height="25" alt="Logo"/></a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Xbox<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Games</li>
<li>Memberships</li>
<li>Gift Cards</li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">PlayStation<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Games</li>
<li>Memberships</li>
<li>Gift Cards</li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">PC<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Games</li>
<li>Time Cards</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</div>
</nav>
</div><!--end container-->
Your content probably has a container .container. Also wrap your navbar with this.
I was successfully using ui-bootstrap's dropdown menu with version 0.11.0 as follows:
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<i class="fa fa-cogs"></i> Hi {{"{{user.fName}}"}} !<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>My Account</li>
<!-- <li class="divider"></li> -->
<li><button class="btn btn-danger btn-block" onclick="LogOut()">Log Out</button></li>
</ul>
</li>
</ul>
But, I needed to use datepicker's month mode which required me to upgrade to 0.13.3. Here's my other question explaining that.
Here's a common plunker.
But, now my dropdown menu has stopped working. On clicking it, no dropdown shows but also there is no error. Any idea how I should tackle this?
To fix this, you have to use the directive dropdown, not only the class.
<li class="dropdown" dropdown>
<a class="dropdown-toggle" dropdown-toggle>
<i class="fa fa-cogs"></i> Hi !
<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li>My Account</li>
<!-- <li class="divider"></li> -->
<li><button class="btn btn-danger btn-block" onclick="LogOut()">Log Out</button></li>
</ul>
</li>
Simply add dropdown and dropdown-toggle on your HTML tag will do the trick.
Working Plunker
As suggested by Pierre, I had to add attributes 'dropdown' and 'dropdown-toggle' rather than classes in version 0.13.3 as compared to 0.11.0. Changing the markup from:
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<i class="fa fa-cogs"></i> Hi !<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>My Account</li>
<!-- <li class="divider"></li> -->
<li><button class="btn btn-danger btn-block" onclick="LogOut()">Log Out</button></li>
</ul>
</li>
</ul>
to
<ul class="nav navbar-nav navbar-right">
<li dropdown>
</i> Hi {{"{{user.fName}}"}} !<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>My Account</li>
<!-- <li class="divider"></li> -->
<li><button class="btn btn-danger btn-block" onclick="LogOut()">Log Out</button></li>
</ul>
</li>
</ul>
did the trick.
I have already tried to do research to fix this problem but no fixes were working! I am using a Bootstrap 3 navigation for my site and it works great on desktop. However, in the mobile menu, I click on an item, expecting the sub nav to appear, and the whole menu closes instead - after first flashing the text of the sub nav for a millisecond. How can I fix this??
Thanks
Edit: here is my navbar setup
<!-- Navigation -->
<nav class="navbar navbar-custom navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse">
<i class="fa fa-bars"></i>
</button>
<a class="navbar-brand page-scroll" href="http://totango2015.staging.wpengine.com/">
<img src="http://totango2015.staging.wpengine.com/wp-content/themes/totango/assets/img/global/totango_logo.png" class="top-logo" />
</a>
</div>
<div class="collapse navbar-collapse navbar-right navbar-main-collapse">
<ul id="menu-primary-navigation" class="nav navbar-nav"><li class="menu-product">product</li>
<li class="menu-customers">customers</li>
<li class="dropdown menu-resources"><a class="dropdown-toggle" data-toggle="dropdown" data-target="#">resources <b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="menu-customer-success-resources">customer success resources</li>
<li class="menu-events-webinars">events & webinars</li>
<li class="menu-totango-support">totango support</li>
</ul>
</li>
<li class="menu-blog">blog</li>
<li class="dropdown menu-company"><a class="dropdown-toggle" data-toggle="dropdown" data-target="#">company <b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="menu-about-us">about us</li>
<li class="menu-news">news</li>
<li class="menu-careers">careers</li>
<li class="menu-contact-us">contact us</li>
</ul>
</li>
<li class="menu-login">login</li>
</ul> </div>
<!-- /.navbar-collapse -->
<hr class="nav-rule">
</div>
<!-- /.container -->
</nav>
When I am resizing the browser screen to mobile size, desktop menu replaced by dropdown with multiple options:
But how to change that dropdown to menu with button like that:
By clicking the "Menu" button menu showing and hiding
In order to get menu like above we have to follow this markup
<div class="row-fluid">
<div class="navbar navbar-inverse">
<div class="navbar-inner">
<div class="container-fluid">
<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>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active"><i class="icon-home icon-white"></i> Home</li>
<li>Features</li>
<li>Pricing</li>
<li class="dropdown">
Products<b class="caret"></b>
<ul class="dropdown-menu">
<li>Latest Products</li>
<li>Popular Products</li>
</ul>
</li>
<li class="dropdown">
Membership<b class="caret"></b>
<ul class="dropdown-menu">
<li>Personal Membership</li>
<li>Premium Membership</li>
</ul>
</li>
<li>Offers</li>
<li>Gallery</li>
<li>About Us</li>
<li>Contact</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
</ul>
</li>
</ul>
</div><!-- /.nav-collapse -->
</div><!-- /.container -->
</div><!-- /.navbar-inner -->
</div><!-- /.navbar -->
DEMO