bootstrap drop down inside navbar not correctly displayed - html

The navbar bellow contains a drop down menu which is not displayed correcly ,
<div style="margin: auto; width: 100%; margin-top: 0px">
<div class="navbar" style="width: 100%">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse"
data-target=".navbar-responsive-collapse"> <span
class="icon-bar"></span> <span class="icon-bar"></span> <span
class="icon-bar"></span> </a>
<a class="brand" href="#">Acceuil</a>
<div class="nav-collapse collapse navbar-responsive-collapse">
<ul class="nav">
<li class="active">
<a href='acceuil/acceuil.jsp'>Notifications</a>
</li>
<li>
<a href='acceuil/gestionIndividuelle.jsp'>Gestion individuelle</a>
</li>
<li>
<a href='acceuil/tableaux.jsp'>Tableaux</a>
</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
<li>
<a href=''>Notes</a>
</li>
<li>
<a href='acceuil/comptes.jsp'>comptes</a>
</li>
</ul>
<ul class="nav pull-right">
<li class="divider-vertical">e</li>
<li>
Déconnexion
</li>
</ul>
</div>
<!-- /.nav-collapse -->
</div>
</div>
<!-- /navbar-inner -->
</div>
</div>
</div>


Why are you adding inline styles to an already full width navbar? Anyways here's your answer:
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-target=".navbar-responsive-collapse" data-toggle="collapse">
<a class="brand" href="#">Title</a>
<div class="nav-collapse collapse navbar-responsive-collapse">
<ul class="nav">
<li class="active"></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 class="divider"></li>
<li class="nav-header">Nav header</li>
</ul>
</li>
<form class="navbar-search pull-left" action="">
<ul class="nav pull-right">
</div>
</div>
</div>
</div>

Related

Bootstrap Bug with Offcanvas

I'm trying to add offcanvas to my bootstrap navigation, the responsive works perfectly but the dropdown menu doesn't work when i try the desktop resolution.
The problem seems to be the "bootstrap.offcanvas.js".
When I delete the "bootstrap.offcanvas.js", it works.
Any idea to resolve this problem?
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container menu-height">
<div class="navbar-header">
<button type="button" class="navbar-toggle offcanvas-toggle pull-right" data-toggle="offcanvas" data-target="#js-bootstrap-offcanvas">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<object width="98px" data="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx" title="xxxxxxxxxxxxxxxxxxxxxxxxxxxx" type="image/svg+xml"></object>
</div>
<!--/.navbar-header -->
<div class="navbar-offcanvas" id="js-bootstrap-offcanvas">
<ul class="nav navbar-nav">
<li class="dropdown">
xxxxxxxxx <b class="caret"></b>
<ul class="dropdown-menu" >
<li>xxxxx</li>
<li class="divider"></li>
<li>xxxxxxxxxx</li>
<li class="divider"></li>
<li>xxxxxxxxxxx</li>
<li class="divider"></li>
<li>xxxxxxxxxxx</li>
</ul>
</li>
<li class="dropdown">
xxxxxxxxx<b class="caret"></b>
<ul class="dropdown-menu">
<li>xxxxxxxxx</li>
<li class="divider"></li>
<li>xxxxxxx</li>
<li class="divider"></li>
<li>xxxxxxxxxx</li>
<li class="divider"></li>
<li>xxxxxxx</li>
<li class="divider"></li>
<li>xxxxxxxxxxx</li>
<li class="divider"></li>
<li>xxxxxxxx</li>
<li class="divider"></li>
<li>xxxxxxxx</li>
</ul>
</li>
<li class="dropdown">
xxxxx <b class="caret"></b>
<ul class="dropdown-menu">
<li>xxxxxx</li>
<li class="divider"></li>
<li>xxxxxx</li>
<li class="divider"></li>
<li>xxxx</li>
<li class="divider"></li>
<li>xxxxxxx</li>
<li class="divider"></li>
<li>xxxxxxx</li>
<li class="divider"></li>
<li>xxxxxx</li>
<li class="divider"></li>
<li>xxxxxxx</li>
<li class="divider"></li>
<li>xxxxxx</li>
</ul>
</li>
<li class="responsive-online-shop"><div class="box-online-shop"><a class="nav-link btn btn-secondary-outline btn-secondary" href="xxxxxx">xxxxxx</a></div></li>
<li><div class="box-online-flag"><object data="xxxxxxxxxxxxx" type="image/svg+xml"></object><span class="flag-responsive hidden-lg">xxxxxxx</span></div></li>
</ul>
</div>
<!--/.navbar-collapse -->
</div>
</nav>

<
<nav class="navbar navbar-default navbar-offcanvas navbar-offcanvas-touch" role="navigation" id="js-bootstrap-offcanvas">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Brand</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active">Link</li>
<li>Link</li>
<li class="dropdown">
Another Link <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>
<li class="dropdown">
Another Link <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>Another Link</li>
</ul>
</div>
</div>
</nav>
</header>
nav class="navbar navbar-default navbar-offcanvas navbar-offcanvas-touch" role="navigation" id="js-bootstrap-offcanvas">
Brand
Link
Link
Another Link
Action
Another action
Something else here
Separated link
One more separated link
Another Link
Action
Another action
Something else here
Separated link
One more separated link
Submit
Link
Another Link

Way to choose a "default" navbar of a Bootstrap Material theme?

I'm using the Bootstrap Material Design Template for a website. It has three different colored navbars of which I want to use the last one. But I'm unsure how to use that last one. Do I need to manually change the color of the navbar, or can I change one thing somewhere so that the color of all the buttons and radio buttons also changes?
I found a piece on the github page which points out how to change the primary color to a cusom one. But I don't want that, I simply want to use the blue color which you see in the third navbar option here.
Any ideas how I can do that? All tips are welcome!

Actually you just have to use different classes for change in colors, by default a Bootstrap theme have navbar-default and navbar-inverse
But in the very theme you're using have a class called navbar-material-light-blue-300 which needs to be added in following manner.
<div class="navbar navbar-material-light-blue-300">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-material-light-blue-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="javascript:void(0)">Brand</a>
</div>
<div class="navbar-collapse collapse navbar-material-light-blue-collapse">
<ul class="nav navbar-nav">
<li class="active">Active</li>
<li>Link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="dropdown-header">Dropdown header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<input type="text" class="form-control col-lg-8" placeholder="Search">
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-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>
Happy Coding :)

.navbar-inverse is the class that affecting its color.
<div class="navbar navbar-inverse">
....
</div>
Other two above than the third have .navbar-default and .navbar-warning classes respectively.
Use below code:
<div class="navbar navbar-inverse">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-inverse-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="javascript:void(0)">Brand</a>
</div>
<div class="navbar-collapse collapse navbar-inverse-collapse">
<ul class="nav navbar-nav">
<li class="active">Active
</li>
<li>Link
</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li class="divider"></li>
<li class="dropdown-header">Dropdown header</li>
<li>Separated link
</li>
<li>One more separated link
</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<input class="form-control col-lg-8" placeholder="Search" type="text">
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link
</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-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>

Language picker in the navbar right side with Bootstrap

I have this part of code:
<div id="navbar-main">
<!-- Fixed navbar -->
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon icon-heart" style="font-size:30px; color:#3498db;"></span>
</button>
<a class="navbar-brand hidden-xs hidden-sm" href="#home"><span class="icon icon-heart" style="font-size:18px; color:#3498db;"></span></a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li> About</li>
<li> Houses</li>
<li> Products</li>
<li> Contact</li>
<li>
<img src="assets/img/it_IT.png" alt="Italiano" />
</li>
<li>
<img src="assets/img/en_US.png" alt="English" />
</li>
</div>
<!--/.nav-collapse -->
</div>
</div>
</div>
I would put this language picker
<li>
<img src="assets/img/it_IT.png" alt="Italiano" />
</li>
<li>
<img src="assets/img/en_US.png" alt="English" />
</li>
in the right side of the navbar and if it's possible in a dropdown menu.
How can I do this? I tried with pull-right and dropdown-menu class attributes, but without success.

From the bootstrap documentation I found this:
<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>
then in your snipped...
<div id="navbar-main">
<!-- Fixed navbar -->
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"><span class="icon icon-heart" style="font-size:30px; color:#3498db;"></span></button>
<a class="navbar-brand hidden-xs hidden-sm" href="#home"><span class="icon icon-heart" style="font-size:18px; color:#3498db;"></span></a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li> About</li>
<li> Houses</li>
<li> Products</li>
<li> Contact</li>
<li><img src="assets/img/it_IT.png" alt="Italiano" /></li>
<li><img src="assets/img/en_US.png" alt="English" /></li>
</ul>
</div><!--/.nav-collapse -->
<ul class="nav navbar-nav navbar-right">
<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>

with some change I was able to obtain what I want
The example in the docs actually shows that the dropdown nav needs to live inside the collapsible div:
<div id="navbar-main">
<!-- Fixed navbar -->
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon icon-heart" style="font-size:30px; color:#3498db;"></span>
</button>
<a class="navbar-brand hidden-xs hidden-sm" href="#home"><span class="icon icon-heart" style="font-size:18px; color:#3498db;"></span></a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li> About</li>
<li> Houses</li>
<li> Products</li>
<li> Contact</li>
<li> <img src="assets/img/it_IT.png" alt="Italiano" /></li>
<li> <img src="assets/img/en_US.png" alt="English" /></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li><img src="assets/img/it_IT.png" alt="Italiano" /></li>
<li><img src="assets/img/en_US.png" alt="English" /></li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container -->
</div>
</div>
Disclaimer: I tried to just fix the accepted answer, but the edit was rejected.

Creating a fixed length navbar using bootstrap

How can I create a navbar like below which has 260px on left side and 260px on right side with center 100% width.
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<button type="button" 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>
</button>
<a class="brand" href="#">Project X</a>
<div class="nav-collapse">
<ul class="nav">
<li class="active">Home</li>
</ul>
<ul class="nav pull-right">
<li>
<a href="#" class="dropdown-toggle" data-toggle="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="nav-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
<li>
<a href="properties.php?type=showall" class="dropdown-toggle" data-toggle="dropdown">
Menu 2
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>Logout</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
Below is the fiddle.
http://jsfiddle.net/gvw7j/10/
How can I create a navbar like below which has 260px on left side and 260px on right side with center 100% width.

Remove "pull-right" From <ul class="nav pull-right">
New Code: jsfiddle.net/gvw7j/16
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<button type="button" 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>
</button>
<a class="brand" href="#">Project X</a>
<div class="nav-collapse">
<ul class="nav">
<li class="active">Home</li>
</ul>
<ul class="nav">
<li>
<a href="#" class="dropdown-toggle" data-toggle="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="nav-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
<li>
<a href="properties.php?type=showall" class="dropdown-toggle" data-toggle="dropdown">
Menu 2
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>Logout</li>
</ul>
</li>
</ul>
</div>
</div>
</div>

try this Demo
.nav{
width:100%;
height:30px;
}
.left{
width:260px;
height:30px;
background:red;
float:left;
}
.center{
width:calc(100% - 520px);
width:-moz-calc(100% - 520px);
width:-webkit-calc(100% - 520px);
height:30px;
background:gray;
float:left;
}
.right{
width:260px;
height:30px;
background:green;
float:left;
}
<div class="nav">
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
</div>

bootstrap dropdown doesn't work

http://jsfiddle.net/Cwf4W/10/
there's my code I can't seem to get the bootstrap drop down menu to work, any help? I'm pretty sure I've got all the js right and the css too, I've been looking for awhile now :o
<!-- BOOTSTRAP -->
<div class="navbar navbar-inverse" style="position: static;">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".subnav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Project Stalk</a>
<div class="nav-collapse subnav-collapse">
<ul class="nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li class="dropdown">
Settings <b class="caret"></b>
<ul class="dropdown-menu">
<li>Account settings</li>
<li>Privacy settings</li>
<li>Logout</li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-search pull-left" action="">
<input type="text" class="search-query span2" placeholder="Search">
</form>
<ul class="nav pull-right">
<li>Link</li>
<li class="divider-vertical"></li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-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><!-- /.nav-collapse -->
</div>
</div><!-- /navbar-inner -->
</div><!-- /navbar -->

Your code looks right, but several javascript files including http://www.sieuphan.com/bootstrap/bootstrap-dropdown.js return an error-404
The development console shows these errors clearly (e.g in Chrome "View > Developer > Javascript console")