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.
Related
I'm using bootstrap navigation, and it's working perfectly when collapsed in android and chrome.
But when I tested it on an iPhone the dropdown list appears much lower in the screen, and I don't know what's causing this spacing.
the dropdown list also always appears behind other items like photos or sliders with iphone (works perfectly in android).
<header>
<div class="header-container">
<nav class="navbar navbar-default">
<div class="container-fluid">
<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>
<a class="navbar-brand" href="#">
<img class="tbc-logo" src="/NewDesign/img/tbc-logo.png">
</a>
</div>
<div id="language">
عربي
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<!--NAVIGATION -->
<ul class="nav navbar-nav ">
<li>Home <span class="sr-only">(current)</span></li>
<li class="dropdown">
About Us <span class="caret"></span>
<ul class="dropdown-menu">
<li>About TBC </li>
<li>Projects</li>
</ul>
</li>
<li class="dropdown">
Our Programs <span class="caret"></span>
<ul class="dropdown-menu">
<li>Private Schools</li>
<!-- <li role="separator" class="divider"></li>-->
<li>Investment </li>
</ul>
</li>
<li>Prequalification <span class="sr-only">(current)</span></li>
<li class="dropdown">
Careers <span class="caret"></span>
<ul class="dropdown-menu">
<li> Vacancies</li>
<li> COOP Training</li>
</ul>
</li>
<li class="dropdown">
Media files <span class="caret"></span>
<ul class="dropdown-menu">
<li>News</li>
<li>Photos</li>
<li>Library </li>
</ul>
</li>
<li>Contact Us <span class="sr-only">(current)</span></li>
</ul>
<!--END NAVBAR-->
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
</div>
</header>
I'm facing the same issue with chrome in iphone as well..
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>
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">
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
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">
:)