This is what I have. How do I center these 3 navbar items to the center of the page without messing everything up in mobile view? Thanks.
Any CSS tricks?
<div class ="container" id = "main">
<div class="navbar navbar-fixed-top">
<div class="container">
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<button class="navbar-toggle" data-target=".navbar-responsive-collapse"
data-toggle="collapse" type="button">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="nav-collapse collapse navbar-responsive-collapse">
<ul class="nav navbar-nav">
<li class="active">
About us
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle"
data-toggle="dropdown">Services <strong class="caret"></strong></a>
<li>
<ul class="nav navbar-nav">
<li class="active">
Contact
</li>
</div><!-- end nav-collapse -->
</div><!-- end container -->
</div><!-- end navbar -->
Related
my goal is to have several parts of the navigation:
LOGO
notification icon
language selector
The proper menu.
On big screens all of the should be visible.
On small screens:
LOGO
notification
language selector AND the menu are collapsed
I have managed to achieve the functionalty based on:
Exclude menu item from the collapse of bootstrap 3 navbar
This is the fiddle:
https://jsfiddle.net/papa_zulu/0efL781p/3//
and the code:
<body>
<nav role="navigation" class="navbar navbar-default">
<div class="container">
<!-- Title -->
<div class="navbar-header pull-left">
LOGO
</div>
<!-- 'Sticky' (non-collapsing) right-side menu item(s) -->
<div class="navbar-header pull-right">
<ul class="nav pull-left">
<!-- This works well for static text, like a username -->
<li class="navbar-text pull-left"><i class="fa fa-envelope fa-2x"></i></li>
</ul>
<!-- Required bootstrap placeholder for the collapsed menu -->
<button type="button" data-toggle="collapse" data-target=".navbar-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>
<!-- Fix to make collapsed appear below when visible via button -->
<div class="visible-xs-block clearfix"></div>
<!-- Collapsing section to the left -->
<div class="collapse navbar-collapse navbar-right">
<ul class="nav navbar-nav">
<li><i class="fa fa-flag fa-2x"></i></li>
</ul>
</div>
<!-- Collapsing section to the right -->
<div class="collapse navbar-collapse navbar-right">
<ul class="nav navbar-nav">
<li id="menu_home"><a class="nav" href="#"><i class="fa fa-home fw fa-2x"></i><span class="visible-xs-inline menu-xs-caption">Home</span></a></li>
<li id="menu_setup"><a class="nav" href="#"><i class="fa fa-cog fw fa-2x"></i><span class="visible-xs-inline menu-xs-caption">Settings</span></a></li>
<li id="menu_logout_li"><a class="nav" href="#"><i class="fa fa-power-off fa-2x"></i><span class="visible-xs-inline menu-xs-caption">Logout</span></a></li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="alert alert-warning">We are but visitors on this rock, hurling through time and space at sixty-six thousand miles an hour.</div>
</div>
Notice:
The notification icon is located LEFT of the "expand button" on small screen -- this is correct.
The problem:
I would like BOTH the notification icon AND the language selector to be located to the LEFT of the menu on big screens.
So the layout on big screens should be:
LOGO envelope flag all_themenu_icons
and one small screens:
LOGO envelope button <-- this is correct now
Any ideas ?
Is this what you are looking for: jsfiddle
<nav role="navigation" class="navbar navbar-default">
<!-- Title -->
<div class="navbar-header">
LOGO
<!-- Required bootstrap placeholder for the collapsed menu -->
<button type="button" data-toggle="collapse" data-target="#navbar-main" class="navbar-toggle collapsed">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<ul class="nav visible-xs pull-right">
<!-- This works well for static text, like a username -->
<li class="navbar-text"><i class="fa fa-envelope fa-2x"></i></li>
</ul>
</div>
<!-- Fix to make collapsed appear below when visible via button -->
<!-- Collapsing section to the right -->
<div class="collapse navbar-collapse" id="navbar-main">
<ul class="nav navbar-nav navbar-right">
<li class="navbar-text hidden-xs"><i class="fa fa-envelope fa-2x"></i></li>
<li><i class="fa fa-flag fa-2x"></i></li>
<li id="menu_home"><a class="nav" href="#"><i class="fa fa-home fw fa-2x"></i><span class="visible-xs-inline menu-xs-caption">Home</span></a></li>
<li id="menu_setup"><a class="nav" href="#"><i class="fa fa-cog fw fa-2x"></i><span class="visible-xs-inline menu-xs-caption">Settings</span></a></li>
<li id="menu_logout_li"><a class="nav" href="#"><i class="fa fa-power-off fa-2x"></i><span class="visible-xs-inline menu-xs-caption">Logout</span></a></li>
</ul>
</div>
I am trying to put a div above navbar-fixed-top in bootstrap, but for some reason the div with its content does not show. I dont know what else to write here, it is asking for detail all is in a code
here is the code
<div class="nav-top">
<div class="container">
<div class="row">
<div class="col-xs-12">fdjfdl;ffd;fjd; fjd;ffffffffffffffffffff
</div>
</div>
</div>
</div>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- 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 class="navbar-brand" ><img src="images/logoa.png" alt="need to name it"></div>
</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 navbar-right">
<li class="active">Главная <span class="sr-only">(current)</span></li>
<li>bla</li>
<li>bla</li>
<li>bla</li>
<li>blabla</li>
<li>blablabla</li>
<li class="j">
Обо мне <span class="caret"></span>
<ul class="dropdown-menu">
<li>blu</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container -->
</nav>
remove your navbar-fixed-top class from code then you get some space to show your text.Have fun
Here is JSFiddle:https://jsfiddle.net/arifkarim/uu0n4cyk/3/
I know this is 4 years late but for anyone else stumbling upon this.
The fixed-top has a z-index of 1030, so just set your own element that you wish to be on top to z-index: 1050 (higher than 1030 at least).
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
My problem, I build a nav-bar that work fine for the responsive part.
But, in large screen, I can't click on the nav-brand link.
So here my code :
<!-- NavBar -->
<div class="navbar-wrapper">
<nav role="navigation" class="navbar navbar-inverse navbar-fixed-top"> <!-- 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" data-toggle="collapse" data-target=".navbar-collapse"><!-- data-target=".nav-collapse" -->
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Accueil
</div>
<div class="collapse navbar-collapse" id=".navbar-collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
<img src="http://localhost/drupal/sites/all/images/rubon335.png" width="30" height="30" alt="" />Le club<b class="caret"></b> <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> <li>Le club</li>
<li>L'historique</li>
<li>Le projet</li>
<li>la structure</li>
<li>Les bénévoles</li>
<li></li>
<li></li>
</ul></li>
<li class="dropdown">
<img src="http://localhost/drupal/sites/all/images/rubon504.png" width="30" height="30" alt="" />Les partenaires<b class="caret"></b> <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> <li>Les partenaires</li>
</ul></li>
<li class="dropdown">
<img src="http://localhost/drupal/sites/all/images/rubon1173.png" width="30" height="30" alt="" />Pratique<b class="caret"></b> <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> <li>Pratique</li>
</ul></li>
</ul>
</div>
</div>
</nav>
So if anybody has an idea... it will be very thankful
And you can test at this link : test website
For the notice, I use bootstrap theme for drupal 7.
Your logo is obscured by the navbar-collapse div.
To give the logo a higher z-index than the menu add this to your CSS:
.navbar-header {
position: relative;
z-index: 1000;
}
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">
:)