So the site I am working on will be a mobile only version of a main site. So I naturally decided to go with bootstrap. We forced the navbar to always be collapsed with some css, and when viewed from within a desktop browser and shrunk the window size, the navbar looks fine. Nice size compared to the body text. However, when we uploaded it to the server to test on actual mobile devices, the body text is a good readable size, but the navbar font and icons are tiny and are definitely not suitable for mobile users. I'm not to sure about what code to show, so I'll include the custom css file that deals with navbar colour change and the always collapsed look.
.navbar-custom {
background-color:#6BC1C2;
color:#ffffff;
border-radius:0;
}
.navbar-custom .navbar-nav > li > a {
color:#fff;
}
.navbar-custom .navbar-nav > li > a:hover{
color: #378182;
background-color: #76CBCC;
}
.navbar-custom .navbar-nav > .active > a, .navbar-nav > .active > a:hover, .navbar-nav > .active > a:focus {
color: #378182;
background-color:#84E3E4;
}
.navbar-custom .navbar-brand {
color:#eeeeee;
}
.navbar-custom .navbar-toggle:hover,
.navbar-custom .navbar-toggle:focus {
background-color: #1FACAD;
}
.navbar-custom .navbar-toggle .icon-bar {
background-color: #888;
}
.nav-icons{
padding-right: 25px;
}
.btn-Link{
color: white;
}
a{
text-decoration: none;
}
.navbar-header {
float: none;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin: 7.5px -15px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.navbar-collapse.collapse.in {display: block !important; }
HTML for Navbar
<body>
<!--Navigation Bar starts here!-->
<nav class="nav navbar-custom">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navigationBar" 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="index.html">Website</a>
<div class="navbar-left nav-icons">
<ul class="navbar-nav" style="list-style-type: none;">
<li> <span class="fa-stack fa-lg">
<a href="tel: 1-705-503-3455" class="btn-Link">
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa fa-phone fa-stack-1x"></i>
</a>
</span>
<span class="fa-stack fa-lg">
<a href="https://maps.google.com/maps?q=80 Bradford Street Barrie Ontario" class="btn-Link">
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa fa-map-marker fa-stack-1x"></i>
</a>
</span>
</li>
</ul>
</div>
</div>
<div class="collapse navbar-collapse" id="navigationBar">
<ul class="nav navbar-nav navbar-left">
<li class="active">Home<span class="sr-only">(current)</span> <i class="fa fa-home fa-lg"></i>
</li>
<li>About Us <i class="fa fa-info-circle fa-lg"></i>
</li>
<li>Services <i class="fa fa-wrench fa-lg"></i>
</li>
<li>Contact <i class="fa fa-envelope fa-lg"></i>
</li>
<li>Addiction & Trauma Center <i class="fa fa-commenting fa-lg"></i>
</li>
<li>Resources <i class="fa fa-archive fa-lg"></i>
</li>
</ul>
</div>
</div>
</nav>
<!--Navigation Bar Ends here!-->
</body>
JSFiddle
Image of the navbar on Mobile, ignore the Icons. They were fine until we started playing around with it.
Related
I'm trying to collapse the Bootstrap navbar when the screen width is 1280px but instead of getting the navbar collapsed, the Navbar goes on top, this is my code:
body {
padding-top: 90px;
}
#media (min-width: 1280px) {
body {
padding-top: 0;
}
}
#media (min-width: 1280px) {
body {
margin-left: 232px;
}
}
.navbar.fixed-left {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1030;
}
#media (min-width: 1280px) {
.navbar.fixed-left {
bottom: 0;
width: 232px;
flex-flow: column nowrap;
align-items: flex-start;
}
.navbar.fixed-left .navbar-collapse {
flex-grow: 0;
flex-direction: column;
width: 100%;
}
.navbar.fixed-left .navbar-collapse .navbar-nav {
flex-direction: column;
width: 100%;
}
.navbar.fixed-left .navbar-collapse .navbar-nav .nav-item {
width: 100%;
}
.navbar.fixed-left .navbar-collapse .navbar-nav .nav-item .dropdown-menu {
top: 0;
}
}
#media (min-width: 1280px) {
.navbar.fixed-left {
right: auto;
}
.navbar.fixed-left .navbar-nav .nav-item .dropdown-toggle:after {
border-top: 0.3em solid transparent;
border-left: 0.3em solid;
border-bottom: 0.3em solid transparent;
border-right: none;
vertical-align: baseline;
}
.navbar.fixed-left .navbar-nav .nav-item .dropdown-menu {
left: 100%;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet"
id="theme_link"
href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/4.3.1/materia/bootstrap.min.css"/>
<nav class="navbar navbar-expand-md navbar-dark bg-primary fixed-left">
<a class="navbar-brand" href>Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault"
aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link">Home</a>
</li>
<li class="nav-item">
<a class="nav-link">About</a>
</li>
<li class="nav-item">
<a class="nav-link">Contact</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu">
<a class="dropdown-item">Action</a>
<a class="dropdown-item">Another action</a>
<a class="dropdown-item">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item">Separated link</a>
<a class="dropdown-item">One more separated link</a>
</div>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" data-class="fixed-left">
<i class="fa fa-arrow-left"></i>
Fixed Left
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-class="fixed-top">
<i class="fa fa-arrow-up"></i>
Fixed Top
<small>(original)</small>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-class="fixed-right">
<i class="fa fa-arrow-right"></i>
Fixed Right
</a>
</li>
</ul>
</div>
</nav>
<div class="container">
<div class="jumbotron">
<h1 class="display-4">
Bootstrap Navbar Sidebar
<br>
<small>Fixed to Left or Right</small>
</h1>
<p>
<strong>
Use classic Bootstrap navbar as sidebar, on left or right side.
</strong>
</p>
<p>
<a class="github-button" href="https://github.com/mladenplavsic/bootstrap-navbar-sidebar"
data-icon="octicon-star" data-show-count="true"
aria-label="Star mladenplavsic/bootstrap-navbar-sidebar on GitHub">Star</a>
<a class="github-button" href="https://github.com/mladenplavsic/bootstrap-navbar-sidebar/fork"
data-icon="octicon-repo-forked" data-show-count="true"
aria-label="Fork mladenplavsic/bootstrap-navbar-sidebar on GitHub">Fork</a>
<a class="github-button" href="https://github.com/mladenplavsic"
aria-label="Follow #mladenplavsic on GitHub">Follow #mladenplavsic</a>
</p>
<p>Same as when using <code>.fixed-top</code> for navbar - add class <code>.fixed-left</code> or <code>.fixed-right</code>
where needed.</p>
<p>Click buttons below, and appropriate class will be added to example navbar.</p>
<div class="btn-group" role="group">
<button type="button" data-class="fixed-left" class="btn btn-primary">
<i class="fa fa-arrow-left"></i>
Fixed Left
</button>
<button type="button" data-class="fixed-top" class="btn btn-primary">
<i class="fa fa-arrow-up"></i>
Fixed Top
<small>(original)</small>
</button>
<button type="button" data-class="fixed-right" class="btn btn-primary">
<i class="fa fa-arrow-right"></i>
Fixed Right
</button>
</div>
</div>
<div class="card">
<div class="card-body">
<div class="form-group">
<label>
Select another bootstrap theme from
Bootswatch
</label>
<select class="form-control width-md" id="theme_select" onchange="selectTheme(value)"></select>
</div>
</div>
</div>
</div>
As you can see I setted 1280px in the media queries, but for some reason the navbar instead of collapse, is displayed as topbar, what I did wrong?
Bootstrap's closest breakpoint is at 1200px. I'd recommend sticking to it, because that way you avoid excessive layout changes. If you're willing to move your breakpoints to #media 1200px to match Bootstrap, you can simply change your class .navbar-expand-md to .navbar-expand-xl, and that's it.
Codepen: https://codepen.io/Terrafire123/pen/NWRKdKR
Edit:
If all you want to do is simply prevent the sidebar from overlapping the body, you can add this:
#media (min-width: 1200px) {
body {
margin-left: 232px !important;
}
}
(This already exists in your original code, but without !important, it's getting overwritten to margin:0; by Bootstrap's default settings.)
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:focus, .navbar-default .navbar-nav > .open > a:hover {
background-color: transparent !important;
}
.nav > li a.dropdown-toggle {
text-align: right;
}
.dropdown-menu {
min-width: 20px !important;
}
.nav>li{vertical-align:top}
/* navbar-icon */
.nav {
// display: flex;
width: 100%;
}
.navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > li > a:hover {
background-color: transparent;
}
.nav > li {
display: inline-block !important;
}
.nav_li_last_options {
float: right;
}
<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.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!--navbar start-->
<nav class="navbar navbar-default navbar-fixed-top navbar_base">
<div class="container-fluid padding_right_0">
<ul class="nav navbar-nav navbar_ul_base" style="max-height: 50px;">
<li><i class="glyphicon glyphicon-comment"></i></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" style="padding: 15px; text-align: left">
<i class="glyphicon glyphicon-search"></i>
</a>
<ul class="dropdown-menu" style="width: 100%;">
<li>
<form class="navbar-form" style="width: 100%; margin: auto">
<div class="input-group input-group-sm">
<input class="form-control" placeholder="Search" id="searchbar" type="text">
<div class="input-group-btn">
<i class="btn btn-default"><i class="glyphicon glyphicon-search"></i>
</i>
</div>
</div>
</form>
</li>
</ul>
</li>
<li class="nav_li_last_options dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" style="padding: 15px;">
<i class="glyphicon glyphicon-option-horizontal"></i>
</a>
<ul class="dropdown-menu dropdown_menu_base">
<li>JavaScript</li>
</ul>
</li>
</ul>
</div>
</nav>
options: bootstrap3(3.3.7) and jquery3
I made navbar that has search icon. When I click search icon, search box in the dropdown menu will be opened.
But, On browser's width < 768, when I click search Icon, navbar and other icons are crashed.
Is there any good way to fix it?
How can I fix it?
According to bootstrap official documentation.
Changing the collapsed mobile navbar breakpoint
The navbar collapses into its vertical mobile view when the viewport is narrower than #grid-float-breakpoint and expands into its horizontal non-mobile view when the viewport is at least #grid-float-breakpoint in width. Adjust this variable in the Less source to control when the navbar collapses/expands. The default value is 768px (the smallest "small" or "tablet" screen).
look Official documentation may help you
I have 2 collapse links, test3 and test
test3 is already collapsed so used in
test is not collapsed has no in
the problem:
this just happen when opens first time I don't know why, the arrow is already down in the link test should not, but after few clicks the arrow backs to work normal.
so test link should be arrow to the left because is not collapsed yet, right now if you see is already to arrow down, someone knows why?
jsfiddle: http://jsfiddle.net/Wc4xt/4399/
HTML:
<div class="sidebar">
<div class="sidebar-wrapper">
<ul class="sidebar-nav">
<li>
<i class="pull-left fa-lg fa fa-book" aria-hidden="true"></i>
<div class="collapse-link">
<a data-toggle="collapse" data-target="#collapseExample1" aria-expanded="false" aria-controls="collapseExample1">test3
</a>
</div>
<div class="collapse in collapse-styled" id="collapseExample1">
<i class="pull-left fa fa-lg fa-list" aria-hidden="true"></i>
test List
<i class="pull-left fa fa-lg fa-list" aria-hidden="true"></i>
Create
</div>
</li>
<li>
<i class="pull-left fa fa-lg fa-book" aria-hidden="true"></i>
<div class="collapse-link">
<a data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">test
</a>
</div>
<div class="collapse collapse-styled" id="collapseExample">
<i class="pull-left fa fa-lg fa-list" aria-hidden="true"></i>
link List
<i class="pull-left fa fa-lg fa-list" aria-hidden="true"></i>
test
</div>
</li>
</ul>
</div>
</div>
CSS:
.sidebar-wrapper {
height: 100%;
overflow-y: auto;
background: #2f3f4d;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.sidebar-nav li {
text-indent: 22px;
line-height: 60px;
border-bottom: 1px solid #455b6f;
}
.sidebar-nav li a {
display: block;
height: 65px;
}
.collapse-link a:after {
font-family: 'Glyphicons Halflings';
content: "\e114";
color: $white;
background-color: black;
}
.collapse-link a.collapsed:after {
content: "\e080";
background-color: red;
}
.collapse-link a.collapsed {
color: white;
}
a {
text-decoration:none;
}
ul li {
list-style:none;
}
As you can see in your CSS, your arrow depends on collapsed class (not in).
You should add collapsed class to you link:
<a class="collapsed" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">test</a>
JSFIDDLE
insert : class="collapsed" in your <a>
With bootstrap, I'm creating a two level Navbar, and I want the top part, the dark blue one, to stay fixed when scrolling, but when I give .navbar-default .navbar-collapse a position:fixed, the middle part gets chopped off. Any idea of why this happens and how I could fix it?
This is my code:
<header id="header">
<nav class="navbar navbar-default hidden-sm hidden-xs" role="navigation">
<div class="navbar-collapse navbar-azul">
<ul class="nav navbar-nav navbar-left navbar-azul">
<li class="uppercase">One</li>
<li class="uppercase">Two</li>
<li class="uppercase">Three</li>
<li class="uppercase">Four</li>
</ul>
<ul class="nav navbar-nav navbar-right navbar-azul">
<li class="white"><i class="fa fa-facebook" ></i></li>
<li><i class="fa fa-twitter" ></i></li>
<li><i class="fa fa-instagram"></i></li>
<li><i class="fa fa-youtube-play"></i></li>
<li><i class="fa fa-play-circle-o"></i>Videos
</li>
<li><i class="fa fa-television"></i>Shows
</li>
</ul>
</div>
</nav>
<div class="navbar navbar-inverse" role="banner">
<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>
<a class="navbar-brand" href="index.html">
<h1><img src="images/logo.png" class="logohead img-responsive" alt="logo"></h1>
</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-left navbar-celeste-text">
<li>Menu 1</li>
<li>Menu 2</li>
<li class="dropdown ">Menu 3 <i class="fa fa-angle-down"></i>
<ul role="menu" class="sub-menu">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</li>
<li>Menu 3</li>
<!-- <li>Antigua Sports</li> -->
<li>Menu 4</li>
<li class="uppercase visible-sm-block visible-xs-block">One Small Screen</li>
<li class="uppercase visible-sm-block visible-xs-block">Two Small Screen</li>
<li class="uppercase visible-sm-block visible-xs-block">Three Small Screen</li>
<li class="uppercase visible-sm-block visible-xs-block">Four Small Screen</li>
<li class="visible-sm-block visible-xs-block"><i class="fa fa-play-circle-o"></i>Videos</li>
<li class="visible-sm-block visible-xs-block"><i class="fa fa-television"></i>Shows</li>
<li class="visible-sm-block visible-xs-block">
<div class="search">
<form role="form">
<i class="fa fa-search"></i>
<div class="field-toggle">
<input type="text" class="search-form" autocomplete="off" placeholder="Search">
</div>
</form>
</div>
</li>
</ul>
</div>
<div class="search hidden-sm hidden-xs">
<form role="form">
<i class="fa fa-search"></i>
<div class="field-toggle">
<input type="text" class="search-form" autocomplete="off" placeholder="Search">
</div>
</form>
</div>
</div>
</div>
And the CSS:
#header{
margin-bottom: 0;
padding: 0 0 30px 0;
margin: 0 auto;
width:100%;
z-index:999;
background:#00b1ec;
}
#header .navbar-inverse .container{
position: relative;
}
.pull-right {
right:50px;
position:absolute;
top:15px
}
#header .navbar {
border: 0;
margin-bottom: 0;
}
#header .navbar-toggle{
margin-top: 20px;
}
#header .navbar-brand{
padding: 0;
margin-left: 0;
}
#header .navbar-brand h1{
padding: 0;
margin: 0;
}
#header .navbar-nav.navbar-left >li:last-child{
margin-left: 20px;
}
#header .navbar-nav.navbar-left >li a {
color: #fff;
font-weight: 400;
}
.navbar-default .navbar-collapse {
position: fixed;
z-index: 999;
}
.navbar-default .navbar-collapse, .navbar-inverse .navbar-nav>li>a {
color: #fff;
}
.navbar-azul-text {
color: #fff;
font-size: 14px;
}
.navbar-celeste-text{
color: #fff;
font-size: 18px;
}
.navbar-default .navbar-nav>li>a{
color:#fff;
}
#header .navbar-inverse .navbar-nav li.active > a,
#header .navbar-inverse .navbar-nav li.active > a:focus,
#header .navbar-nav.navbar-left li > a:hover,
.navbar-inverse .navbar-nav > .open > a,
.navbar-default .navbar-nav>li>a:focus,
.navbar-default .navbar-nav>li>a:hover {
background-color: inherit;
border: 0;
color: #E61F47;
}
You have two choices:
Add navbar-fixed-top class to nav tag with navbar class and remove your css with position: fixed.
Add width: 100% to your CSS (.navbar-default .navbar-collapse).
I try to create a navigation menu. Some of the items should get a submenu which will be shown by clicking/hovering the arrow-icon.
But I got some problems to position the submenu correctly
JSFiddle: http://jsfiddle.net/g651mwdu/
<nav>
<div class="nav-button-group"> <span class="nav-button-group-title">Title</span>
<div class="nav-button-container"> <span class='fa fa-plus button-icon'></span>
<span class="button-text">Add</span>
<div class="button-arrow-down"></div>
<div class="submenu">Show some more elements</div>
</div>
<div class="nav-button-container"> <span class='fa fa-cog button-icon'></span>
<span class="button-text">Change</span>
<div class="button-arrow-down"></div>
</div>
<div class="nav-button-container"> <span class='fa fa-link button-icon'></span>
<span class="button-text">Link</span>
</div>
<div class="nav-button-container"> <span class='fa fa-comment-o button-icon'></span>
<span class="button-text">Tooltip</span>
</div>
<div class="nav-button-container"> <span class='fa fa-trash-o button-icon'></span>
<span class="button-text">Remove</span>
</div>
</div>
</nav>
CSS
.nav-button-container {
display: inline-block;
width: 2em;
height: 2.5em;
padding: .25em;
text-align: center;
color: #555;
}
.button-text {
display: block;
font-size: .5em;
margin: .5em 0;
}
.button-icon {
vertical-align: middle;
font-size: 1.3em;
}
.button-arrow-down {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #B4B4B4;
margin: 0 auto;
}
.line-separator {
display: inline-block;
width: 1em;
}
nav {
background-color: #f2f2f2;
padding: .3em 0;
border-radius: 7px;
}
.nav-button-group {
display: inline-block;
background-color: #fafafa;
padding: .3em;
border-radius: 5px;
}
.nav-button-group-title {
display: block;
font-weight: bold;
font-size: .7em;
color: #555;
padding: 0 .5em;
background-color: #F2F2F2;
border-radius: 4px;
}
Is this what you are trying to achieve (navigation with font awesome icons aligned to the drop-down text)?
You're using buttons to build your menu which isn't necessary (or recommended). Use ul unordered lists and list items li to build your nav. Then inserting icons is pretty straight forward.
<li><i class="fa fa-pencil-square-o fa-fw"></i> Drafts
Example Snippet
.navbar {
border-radius: 0px;
}
.dropdown-submenu {
position: relative;
}
.dropdown-submenu > .dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px 6px 6px 6px;
border-radius: 0px;
}
.dropdown-submenu:hover > .dropdown-menu {
display: block;
}
.dropdown-submenu > a:after {
display: block;
content: " ";
float: right;
width: 0px;
height: 0px;
border-color: transparent;
border-style: solid;
border-width: 5px 0px 5px 5px;
border-left-color: #cccccc;
margin-top: 5px;
margin-right: -10px;
}
.dropdown-submenu:hover > a:after {
border-left-color: #ffffff;
}
.dropdown-submenu.pull-left {
float: none;
}
.dropdown-submenu.pull-left > .dropdown-menu {
left: -100%;
margin-left: 10px;
-webkit-border-radius: 6px 0px 6px 6px;
-moz-border-radius: 6px 0px 6px 6px;
border-radius: 6px 0px 6px 6px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav role="navigation" class="navbar navbar-inverse">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<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> Brand
</div>
<!-- Collection of nav links, forms, 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 class="dropdown"> <a data-toggle="dropdown" class="dropdown-toggle" href="#">Messages <b class="caret"></b></a>
<ul role="menu" class="dropdown-menu">
<li><i class="fa fa-envelope-o fa-fw"></i> Inbox
</li>
<li><i class="fa fa-pencil-square-o fa-fw"></i> Drafts
</li>
<li><i class="fa fa-paper-plane-o fa-fw"></i> Sent Items
</li>
<li class="divider"></li>
<li><i class="fa fa-trash-o fa-fw"></i> Trash
</li>
</ul>
</li>
<li>Hello
</li>
<li class="dropdown"> <a data-toggle="dropdown" class="dropdown-toggle" href="#">Things <b class="caret"></b></a>
<ul role="menu" class="dropdown-menu">
<li><i class="fa fa-envelope-o fa-fw"></i> Inbox
</li>
<li><i class="fa fa-pencil-square-o fa-fw"></i> Drafts
</li>
<li><i class="fa fa-paper-plane-o fa-fw"></i> Sent Items
</li>
<li class="divider"></li>
<li><i class="fa fa-trash-o fa-fw"></i> Trash
<li class="dropdown-submenu"> <a tabindex="-1" href="#"><i class="fa fa-hand-o-right fa-fw"></i> Profile</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#"><i class="fa fa-calendar-o fa-fw"></i> Account</a>
</li>
<li><a tabindex="-1" href="#"><i class="fa fa-folder-open-o fa-fw"></i> Users</a>
</li>
<li><a tabindex="-1" href="#"><i class="fa fa-file-o fa-fw"></i> Login</a>
</li>
</ul>
</li>
</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Login
</li>
</ul>
</div>
</nav>