I need to do a 2 navbars in one single page. Main Menu navbar1 and the Sub Menu navbar 2. I got the template from Bootsrap 3 site. However, whenever I clicked the sub menu navbar toggle button, the one being expanded is the Main Menu navbars. My codes are the same for the two navbars except the IDs. Please help.
<nav class="navbar nav-bar-default" id="memberNavInfo">
<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>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>`
As you can see here
<!-- 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">
The data-target is #bs-example-navbar-collapse-1
and the 2nd navbar id which is the target must be the same #bs-example-navbar-collapse-1
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
But you made it bs-example-navbar-collapse-2 so to fix it just change number 2 to number 1 and the code is fixed.
<nav class="navbar nav-bar-default" id="memberNavInfo">
<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>
<a class="navbar-brand" href="#">Brand</a>
</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 class="active">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
And that the problem in your code which need to be fixed, But as i understand your qestion is how to make multilevel dropdown menu with the same style, Please check this answer https://stackoverflow.com/a/22484486/7273097
Try changing the data-target, from this:
<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>
To this:
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2" 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>
Related
I can't get my fixed top navbar working in Angular.
My main app.component template is:
<page-header></page-header>
<router-outlet></router-outlet>
And the bootstrap navbar is included in my page-header:
<nav class="navbar navbar-default navbar-fixed-top">
<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="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Default</li>
<li>Static top</li>
<li class="active">Fixed top <span class="sr-only">(current)</span></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
My router-outlet hast 300% height. What I want to achieve now is that the page-header stays fixed at the top. Is this even possible with Angular and bootstrap 4?
Fixed it by changing navbar-fixed-top to only fixed-top
I have a Bootstrap Navbar and I want that when I click on deploy button, this CSS (of the button) changes (I do not like CSS Button default). So... I want next:
When I click on Menu (in Xtra Small Sizes -as movile-) its CSS Styles change (eg: background-color: red).
How could I do this? What is his ClassNameCss? (eg: .navbar button[aria-expanded=true]) Thank you.
EDIT: Added my NavBar Code:
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle navbar-collapse-left" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Menú</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
{/*<a class="navbar-brand" href="/inicio"><img id="idFotoLogotipo" width="200px" src="./assets/images/cabecera_CE.jpg"/></a>*/}
<a class="navbar-brand visible-xs-block" /*href="http://www.upct.es/"*/><span id="idTextoLogotipo">- INCIDENCIAS -</span></a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-left">
<MenuNavItem to='/administrador/inicio' index={true} /*menuItemActive="inicio"*/>Inicio</MenuNavItem>
<MenuNavItem to='/administrador/nueva_incidencia' /*menuItemActive="nueva_incidencia"*/>Nueva Incidencia</MenuNavItem>
<MenuNavItem to='/administrador/incidencias_recibidas' /*menuItemActive="incidencias_recibidas"*/>Incidencias Recibidas</MenuNavItem>
<MenuNavItem to='/administrador/informes' /*menuItemActive="informes"*/>Informes</MenuNavItem>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="divider visible-xs-block"></li>
{this.state.logged === true ? <p class="nav navbar-text hidden-xs"><span class="glyphicon glyphicon-user"></span> Bienvenido, {this.state.nombre} ({this.state.dni})</p> : ''}
{this.state.logged === true ? <p class="nav navbar-text visible-xs-block"><span class="glyphicon glyphicon-user"></span> Bienvenido, {this.state.nombre}</p> : ''}
{this.state.logged === true ? <li class="salir"><span class="glyphicon glyphicon-off"></span> Salir</li> : <li class="entrar"><span class="glyphicon glyphicon-user"></span> Entrar</li>}
</ul>
</div>
</nav>
If you mean the 'burger menu' (three lines) dropdown toggle button shown here:
Then you should be able to target this with:
.navbar-toggle[aria-expanded="true"],
.navbar-toggle[aria-expanded="true"]:focus {
background-color: red;
}
Note that the :focus style is required as otherwise the default grey background colour will still show when the button is clicked, as at that point the button will have focus.
EDIT: try this example - I've since prefixed the styles with .navbar-default, which should ensure the styles work.
.navbar-default .navbar-toggle[aria-expanded="true"],
.navbar-default .navbar-toggle[aria-expanded="true"]:focus {
background-color: red;
}
.navbar-default .navbar-collapse[aria-expanded="true"] {
background-color: #428bca;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<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>
<a class="navbar-brand" href="#">Brand</a>
</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 class="active">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
When I add a <small> tag in a Twitter Bootstrap navbar, why does line-height increase by 1px?
<li><small>welcome</small>Link</li>
<a> tag 21px , <li> tag 51px
I want to know why?
<nav class="navbar navbar-default" role="navigation">
<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">
<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="#">Brand</a>
</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 class="active">Link <span class="sr-only">(current)</span></li>
<li><small>welcome</small>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
try this in your css file (to override bootstrap.css):
.navbar-nav>li>a {
line-height: inherit;
}
you will get rid of the 1px.
<nav class="navbar navbar-default" role="navigation">
<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="#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>
<a class="navbar-brand" href="#">Brand</a>
</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 class="active">Link</li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div class="below-nav" style="background-color:red;">
</div>
When default navbar width is grown from default size it overlaps div below it so how do we prevent this and let div appear below without being overlapped???I don't want the div to be of fixed width.
This question is answered in Twitter Bootstrap - top nav bar blocking top content of the page
It's about when to collapse and adjusting the padding-top for the body element.
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>