I am trying to create a header for my website. I want to have my logo at the top left corner and my nav bar at the top right corner of the window. My issue is that the nav bar is not aligned flush with the center of my logo. Here's the goods:
#logoHeader {
float: left;
vertical-align: middle;
}
ul {
list-style: none;
display: inline block;
vertical-align: middle;
}
li {
float: right;
padding: 10px;
font-size: 22pt;
display: inline-block;
}
.header .navContainer {
height: 131px;
vertical-align: middle;
}
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link type= "text/css" rel="stylesheet" href="all.css"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script type = "text/javascript" src = "index.js"></script>
<title>JM</title>
</head>
<body>
<div class ="container">
<div class="row">
<div class="col-md-4 header">
<img id = "logoHeader" src="file:///Users/Jon/Desktop/JM.COM/images/bigJM.png"/>
</div>
<div class="cold-md-8 navContainer">
<ul class = "navBar">
<li>Home</li>
<li>Blog</li>
<li>Publications</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</body>
</html>
Follow Bootstraps Rules
http://getbootstrap.com/components/#navbar
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body>
<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 navbar-right">
<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>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<body>
</html>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
In your bootstrap.min.css change margin-top and margin-bottom to 0px for ol and ul selectors
Example
ol, ul {
margin-top: 0px;
margin-bottom: 0px;
}
Also in your css codes in your question padding is also one of the issue. Setting a padding of 10px will result in top, bottom, left and right additional space.
change it to
li {
float: right;
/*padding: 10px;*/
padding-left: 10px;
padding-right: 10px;
font-size: 22pt;
display: inline-block;
}
Related
I have a problem with hiding some of my content. I am very new to coding, i started with coding for a week ago. Until now i have learned html, the most inportaint css, and how to use bootstrap 4. My problem is I want to hide some content. I have searched around on the web for hours, and the only ting i found useful was the d-none and d-sm-block and all the other hide and show tags. I tried it several places in my code without any luck, so hope anyone can help.
I want the search bar, log in and register button on small screens to disappear, and then a small dropdown menu shows up instead(only on the small screens). In the dropdown menu i want to have the log in an register button. I know i didn't use boopstrap as navbar at the top, but thats beacause I hadn't learn it yet, and i didn't want to change it since I liked the size on the buttons.
Hope anyone can help.
The top of my html code.(The hotpink buttons are bigger in my real code since I have other text in it)
<head>
<title>hello world</title>
<link rel="stylesheet" href="../test_sublime/css/bootstrap.css">
<link href="test1.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<h2><em><u>Header</u></em>.no</h2>
<nav class="headnav">
<ul>
<li class="hotpink"><a class="b_link" href="#">Test</a></li>
<li class="hotpink"><a class="b_link" href="#">Test</a></li>
<li class="hotpink"><a class="b_link" href="#">Test</a></li>
<li class="hotpink"><a class="b_link" href="#">Test</a></li>
<li class="hotpink"><a class="b_link" href="#">Test</a></li>
</ul>
</nav>
<div class="btn-group">
Logg In
Register
<!--This is the search bar I want to hide when the screen is small-->
</div>
<form class="form-inline my-lg sok">
<input class="form-control mr-sm-2 msok" type="search" placeholder="Søk" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0 msok" type="submit">Søk</button>
</form>
<!--I want this dropdown menu to show up when the screen is small-->
<div class="dropdown-menu d-block d-sm-none" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="../test_sublime/logg in.html">Logg Inn</a>
<a class="dropdown-item" href="../test_sublime/registrer.html">Register Deg</a>
<div class="dropdown-divider"></div>
</div>
</header>
...
<footer>
...
<script src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script scr="../test_sublime/jQuery/jquery.js"><\/script>');</script>
<script type="text/javascript" src="../test_sublime/js/test.js"></script>
<script src="test_sublime/js/bootstrap.min.js"></script>
</footer>
</body>
Parts of my css
body {
background: pink;
margin-left: 12px;
margin-right: 12px;
margin-top: 10px;
}
h2 {
display:inline;
background: mediumvioletred;
padding: 20px 40px 7px 40px;
margin: 0px 5px 40px -15px;
border-radius: 4px;
}
ul {
display: inline;
margin: 0px 0px 0px -38px
}
.sok {
display: inline-block;
float: right;
margin-right: 35px;
margin-top: 10px;
}
.msok {
margin-top: 0px;
}
.btn-group {
padding: 0px 10px 0px -10px
display: inline;
float: right;
margin-top: 10px;
}
nav.headnav {
display: inline-block;
}
Is it any ways to fix it with bootstrap, or do i have to use JavaSript or something else?
(Sorry for the colors)
Use a media query in your css
#media (max-width: 767.98px) {
form.sok {
display: none;
}
You can hide the elements based on screen size.
Bootstrap Responsive Break Points
This will solve your problem using navbar class.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="bootstrap.css">
<script src="jquery.js"></script>
<script src="bootstrap.js"></script>
</head>
<body>
<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="#">yourbrand</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">Home <span class="sr-only">(current)</span></li>
<li>About</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="input-group">
<input type="text" class="form-control" placeholder="Search">
<span class="btn input-group-addon">Search</span>
</div>
</form>
<ul class="nav navbar-nav navbar-right">
<div class="btn-group">
Logg In
Register
</div>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</body>
</html>
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 5 years ago.
Improve this question
I have made a simple navbar with bootstrap,
now how to make navbar dropdowns to such like the photo added?
having triangular edge marked in the red circle.
I have also tried this example but not worked here :'(
My code is given here:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<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>
</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>
</body>
</html>
Live Demo: https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_dropdown-menu&stacked=h
Code for dropdown
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.dropdown-menu:before {
position: absolute;
top: -7px;
left: 9px;
display: inline-block;
border-right: 7px solid transparent;
border-bottom: 7px solid #ccc;
border-left: 7px solid transparent;
border-bottom-color: rgba(0, 0, 0, 0.2);
content: '';
}
.dropdown-menu:after {
position: absolute;
top: -6px;
left: 10px;
display: inline-block;
border-right: 6px solid transparent;
border-bottom: 6px solid #ffffff;
border-left: 6px solid transparent;
content: '';
}
</style>
</head>
<body>
<div class="container">
<h2>Dropdowns</h2>
<p>The .divider class is used to separate links inside the dropdown menu with a thin horizontal line:</p>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Tutorials
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li class="divider"></li>
<li>About Us</li>
</ul>
</div>
</div>
</body>
</html>
my navbar submenu goes like this when i go to mobile screen
this is what i want to be happen to my navbar submenu when i use mobile screen.
here is the code i used. someone tries to explain to me
.navbar-toggle {
z-index:3;
}
.navbar-nav {
float:none;
display: block;
text-align: center;
}
.navbar-nav > li {
display: inline-block;
float:none;
}
<div class="container">
<nav class="navbar navbar-default" 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="#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>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Sauce</li>
<li class="dropdown">
Syrup <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>Separated link</li>
</ul>
</li>
<li>Frappe</li>
<li>Accessories</li>
<li>Contact</li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
</div>
You can do this in this way--
Working Example
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style type="text/css">
#dropdown-menu {
position: absolute;
background-color: white;
border: 2px;
}
.navbar-nav {
float:none;
display: block;
text-align: center;
}
.navbar-nav > li {
display: inline-block;
float:left;
}
</style>
</head>
<body>
<div class="container-fluid">
<nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<!-- Collect the nav links, forms, and other content for toggling -->
<ul class="nav navbar-nav">
<div class="row">
<div class="col-xs-2">
<li>Home</li>
</div>
<div class="col-xs-2">
<li>Sauce</li>
</div>
<div class="col-xs-2">
<li class="dropdown">
Syrup <b class="caret"></b>
<ul id="dropdown-menu" class="dropdown-menu">
<li >Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>Separated link</li>
</ul>
</li>
</div>
<div class="col-xs-2">
<li style="float: right;">Frappe</li>
</div>
<div class="col-xs-2">
<li style="float: right;">Accessories</li>
</div>
<div class="col-xs-2">
<li style="float: right;">Contact</li>
</div>
</div>
</ul>
<!-- /.navbar-collapse -->
</nav>
</div>
</body>
</html>
Hope this helps!
I have problem with coding a header, the header I have coded is being displayed well in Chrome, but its not in Firefox. (In Firefox its a bit Missy).
(the header is responsive and coded using Bootstrap 3)
photos explains the problem:
The header In Chrome:
(nice and clean)
The header In Firefox:
(missed up)
this problem happened when I made the top bar.
my code:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/custom4.css">
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
<script src="js/respond.js"></script>
</head>
<body>
<!-- top bar starts -->
<div class="top-bar">
<div class="container">
<div class="row">
<div class="col-xs-6">
<ul class="social-icons">
<li><span class="fa fa-facebook"></span></li>
<li><span class="fa fa-twitter"></span></li>
<li><span class="fa fa-google-plus"></span></li>
<li><span class="fa fa-instagram"></span></li>
</ul>
</div>
<div class="col-xs-6">
<ul class="sign-options pull-right">
<li>sign in</li>
<li><span>/</span></li>
<li>sign up</li>
</ul>
</div>
</div> <!-- end row -->
</div> <!-- end container -->
</div> <!-- end top-bar div -->
<!-- top bar ends -->
<nav class="navbar navbar-default">
<div class="container">
<!-- Brand and toggle-->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#greeny-header">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img src="img/logo.png" alt="Logo" class="img-responsive">
</div>
<!-- End Brand and toggle-->
<!-- navbar collapse -->
<div class="collapse navbar-collapse" id="greeny-header">
<!-- navigation list -->
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li class="dropdown">
Pages<b class="caret"></b>
<ul class="dropdown-menu">
<li>Who are we</li>
<li>Action</li>
<li>List</li>
<li>Option</li>
<li class="divider"></li>
<li>Separated link</li>
<li>Separated link</li>
<li class="divider"></li>
<li>Action</li>
</ul>
</li>
<li>Blog</li>
<li>Portfolio</li>
<li>Contact</li>
<li><span class="fa fa-search"></span></li>
</ul>
<!-- end navigation list -->
</div>
<!-- end navbar-collapse -->
</div><!-- end container -->
</nav>
<!-- Javasctipt -->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
the CSS
/*
*********************
* =header
*********************
*/
.navbar-default{
height: 100px;
}
#greeny-header{
margin-top: 25px;
}
.navbar-header a{
margin-top: 15px;
}
.navbar-header a{
padding-top: 0;
padding-bottom: 0;
}
.navbar-nav span{
font-size: 25px;
}
.navbar-toggle {
position: absolute;
float: none;
right: 0;
top: 5px;
}
/*
*********************
* =top-bar
*********************
*/
.top-bar{
background-color: #2b2b2b;
height: 40px;
}
.social-icons{
margin-top: 2px;
padding-left: 0;
}
.social-icons li{
display: inline;
font-size: 23px;
padding-right: 20px;
}
.social-icons span{
color: #a59f9a;
}
.social-icons span:hover{
color: #e1e1e1;
}
.sign-options{
margin-top: 7px;
}
.sign-options li{
display: inline;
font-size: 14px;
text-transform: uppercase;
padding-left: 7px;
}
.sign-options a{
color: #b3aca7;
text-decoration: none;
}
.sign-options a:hover{
color: #e1e1e1;
}
.sign-options span{
color: #d79450;
}
try to wrap any div with container div inside to row. I did it in this Demo.
Basically used your code and wrapper every section into row class. I tested with browser stack and it looks fine now.
I added the link to new screenshot "Win XP, FF v15.0". Here to screenshot
Add the float : left property to the logo style.
This is why I love Firebug. Looking at the computed styles and the layout will give you your answer right away. There are two usual suspects in this type of problem: 1) the display styles are not set to inline; or 2) There is a problem with the float.
I have been trying to code a responsive header using Bootstrap 3, I just have one.
There is a space above the navigation list, and below the logo as well.
How can I line up the two of them? (logo&nav)
Picture of my header which explains the problem:
My code:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/custom4.css">
<script src="js/respond.js"></script>
</head>
<body>
<div class="row">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<img src="img/logo.png" alt="logo" class="visible-xs">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#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="container">
<div class="collapse navbar-collapse" id="collapse">
<img src="img/logo.png" alt="logo" class="hidden-xs push-left">
<ul class="nav navbar-nav pull-right">
<li>Home</li>
<li>pages</li>
<li>Blog</li>
<li>Portfilio</li>
<li>Conact</li>
</ul>
</div>
</div>
</nav>
</div>
<!-- Javasctipt -->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Structurally your html differs than my approach and from the docs on bootstrap for the navbar implementation. You put .row around col-* classes. You don't need to duplicate the logo for small and large, if it's the same image. You can also just modify the brand and positioning in the min-width. Don't know your logo widths, but you can easily adjust in the min-width what you need and, also in the min-width, adjust the padding on the parent a so that it visually is in line with the logo.
DEMO: http://jsbin.com/aXAyicIS/1/
EDIT: http://jsbin.com/aXAyicIS/1/edit
CSS
.navbar-brand {
width: 100%;
padding: 0 70px 0 15px;
}
/* logo image on mobile */
.navbar-brand img {
max-width: 100%
}
.navbar-toggle {
position: absolute;
float: none;
right: 0;
top: 5px;
}
#media (min-width:768px) {
.navbar-brand {
float: none;
width: auto;
max-height: none;
padding: 0!important;
}
.navbar-header {
float: left;
margin: 0;
width: 30%;
}
/* logo image */
.navbar-brand img {
margin: 0;
max-width: 100%;
max-height: none;
}
.nav.navbar-nav li.active a,
.nav.navbar-nav li.active a:hover {
background: transparent
}
#nav-collapse {
float: right;
padding: 0!important;
margin: 0!important;
width: 70%;
}
}
HTML
<div class="navbar navbar-default navbar-static-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>
<img src="http://placehold.it/300x80/444444/FFFFFF&text=LOGO">
</div>
<div id="nav-collapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Anchor 1</li>
<li>Anchor 2</li>
<li>Anchor 3</li>
<li class="dropdown"> Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Test</li>
<li>Another link</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>
<!--/.container -->
</div>
<!--.navbar-->