I have seen several questions related to this, but none seemed to solve my problem. I want to exclude some menu items from collapsing when on mobile. Specifically the "User Name" item in this example. I have managed to get it working (so-so), but the left margin disappears when on mobile. Any solutions to this?
Here is my code:
<nav role="navigation" class="navbar navbar-default">
<div class="navbar-header">
<ul class="nav navbar-nav pull-left">
<li> User Name </li>
</ul>
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collection of nav links and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"> Home</li>
<li>Profile</li>
<li>Messages</li>
<li class="visible-xs" >Contact Us</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Login</li>
</ul>
</div>
</nav>
Thanks!
Use navbar-brand instead which will have the proper alignment on mobile..
http://www.codeply.com/go/CM2sytawRI
<nav role="navigation" class="navbar navbar-default">
<div class="navbar-header">
<div class="navbar-brand"><a class="" href="#"> User Name </a></div>
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collection of nav links and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"> Home</li>
<li>Profile</li>
<li>Messages</li>
<li class="visible-xs">Contact Us</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Login</li>
</ul>
</div>
</nav>
Related
I am using bootstrap to have a side navigation bar in mijn application. I would like the dropdown menu's to be open by default, but I can't work it out...
My code:
<nav class="navbar navbar-default sidebar" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-sidebar-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" id="bs-sidebar-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Home of {{ Auth::user()->name }}<span style="font-size:16px;"></span></li>
<li class="dropdown">
Input <span class="caret"></span><span style="font-size:16px;"></span>
<ul class="dropdown-menu forAnimate" role="menu">
<li>Form</li>
</ul>
</li>
<li class="dropdown">
</span><span style="font-size:16px;"></span>
<ul class="dropdown-menu" role="menu">
<li>Results</li>
</ul>
</li>
<li>Tools<span></span></li>
<li>Documentation<span></span></li>
#endif
</ul>
</div>
</div>
</nav>
Try to change
<li class="dropdown">
to
<li class="dropdown open">
So I am new to bootstrap and can't seem to find a solution to fix my problem which is when the mobile view the menu is open when I want it to be collapsed by default.
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<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>
</div>
<div class="navbar-collapse collpase">
<ul class="nav navbar-nav navbar-left">
<li>Home</li>
<li>News & Events</li>
<li class="dropdown">
Things to do<b class="caret"></b>
<ul class="dropdown-menu">
<li>Leisure</li>
<li>Groups & Activities </li>
<li></li>
</ul>
</li>
<li class="dropdown">
Services<b class="caret"></b>
<ul class="dropdown-menu">
<li>Education & Learning</li>
<li>Personal Care</li>
<li>Police</li>
<li></li>
</ul>
</li>
<li>Businesses</li>
<li>History</li>
<li>Discussion Forum</li>
</ul>
</div>
</div>
</div>
Example screenshot
Typo in code
<div class="navbar-collapse collpase">
check spelling for collapse
You have the wrong class in the wrapping <div> of the dropdown, should be as follows (there's a typo in yours - "collpase"):
<div class="collapse navbar-collapse">
https://jsfiddle.net/2y9edmk1/
It's a JQuery issue.Check wether the JQuery is included correctly or not.
How can I use two navbar-toggle menus next to each other? If I click on the first icon it will open normally but if I click on the second icon, the first one doesn't close.
Here is what I am trying to do
<nav class="navbar-blue" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header navbar-default">
<button type="button" class="navbar-toggle navbar-user" data-toggle="collapse" data-target="#navbar-collapse-2">
<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 navbar-menu" data-toggle="collapse" data-target="#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" href="#">
Logo goes here
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-default" id="navbar-collapse-1">
<ul class="nav navbar-nav client-nav navbar-right">
<li>
<a class="active" href="#">My Projects</a>
</li>
<li>
Search
</li>
<li>
Post Project
</li>
<li class="hidden-xs">
<a class="dropdown-toggle" data-toggle="dropdown" href="#"><span class="fa fa-user"></span><span class="fa fa-sort-desc"></span></a>
<ul class="dropdown-menu client-dropdown">
<li>My Profile</li>
<li>Account Settings</li>
<li>Sign Out</li>
</ul>
</li>
</ul>
</div>
<!-- User menu to show on screens < 768px -->
<div class="collapse navbar-collapse navbar-default" id="navbar-collapse-2">
<ul class="nav navbar-nav client-nav navbar-right">
<li>My Profile</li>
<li>Account Settings</li>
<li>Sign Out</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
I had to update bootstrap to the latest version. Your demo is using 3.0.0 whereas 3.3.5 is the latest. Regardless, according to the documentation from bootstrap's site, you can accomplish this by listening for the show.bs.collapse event and triggering .collapse('hide') for the other menus.
$(function(){
$('.navbar-blue .navbar-collapse').on('show.bs.collapse', function(e) {
$('.navbar-blue .navbar-collapse').not(this).collapse('hide');
});
});
Demo: Jsfiddle
I have the following code. on phone, the navbar wont collapse after expanding, I have to click the button for it to toggle the style. any Idea?
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a ui-sref="default" class="navbar-brand"></a>
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="navbar-main">
<ul class="nav navbar-nav">
<li ng-repeat="top in topnav" ng-class="{active: isActive(top.view), dropdown:top.subnav.length>=0}">
<a ui-sref="{{top.state}}" ng-show="top.subnav.length==0">{{top.name}}</a>
{{top.name}} <b class="caret"></b>
<ul class="dropdown-menu" ng-show="top.subnav.length > 0">
<li ng-repeat="sub in top.subnav">
<a ui-sref="{{sub.state}}">{{sub.name}}</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
Working Fiddle
Just use this;
<div class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<button data-target=".navbar-collapse" data-toggle="collapse" class="navbar-toggle" type="button">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Project name
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown <b class="caret"></b></a>
<ul class="dropdown-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>
</div><!--/.nav-collapse -->
</div>
</div>
did u include bootstrap.min.js?
Its required for drop down and collapse menu.
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
How can I make the submenu to align to the left side of the header??
I have tried .dropdown-menu-left. in the <ul> but it doesn't work.
Here is the code:
<div class="mainMenu">
<nav class="navbar navbar-sura" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<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" id="bs-example-navbar-collapse-1">
<div class="container">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">Seguros para Autos
<ul class="dropdown-menu">
<li class="pruebamenu">Seguros para Autos</li>
<li class="pruebamenu">Centros de servicio</li>
<li class="pruebamenu">Asistencia</li>
<li class="pruebamenu">Te damos más</li>
<li class="pruebamenu">Acompañamiento satelital</li>
<li class="pruebamenu">Formación</li>
<li class="pruebamenu">Aliados</li>
<li class="pruebamenu">Promociones</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</nav>
</div>
It's hard to tell from your screen capture, but the dropdown might be doing that because the dropdown is near the right edge of the browser's viewport - Bootstrap 3 now "intelligently" positions tooltips and popovers inside the viewport if it detects it will render outside the browser's viewport. I suspect the same is true for dropdowns.
This made happen the alignment to the right:
<ul class="nav navbar-nav navbar-right">
I've changed to:
<ul class="nav navbar-nav navbar-left">
:)