huhu

by Pavan Kumar

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<body>
<div id="header">
	<div class = "desktop-bar">
			<nav class="navbar navbar navbar-default navbar-fixed-top">
				<div class="container">
					<div class = "navbar-header">
						<a class="navbar-brand" href="#">Brand</a>
					</div>
					<ul class="nav navbar-nav navbar-left" role="navigation">
						<li role="presentation" class="dropdown">
							<a  class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
							<i class="fa fa-plus fa-lg "></i>&nbsp; <span >Add</span><span class=" caret"></span>
							</a>
							<ul class= "dropdown-menu">
								<li><a href="#">1</a></li>
								<li><a href="#">2</a></li>
								<li><a href="#">3</a></li>
								<li role="separator" class="divider"></li>
								<li><a href="#">4</a></li>
							</ul>
						</li>
						<li role="presentation">
							<form class= "desktop-search navbar-form navbar-left"  role="search">
								<div class="input-group">
									<input type="text" class="form-control" placeholder="Search a place" name="srch-term" id="srch-term">
									<span class="input-group-btn">
										<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
									</span>
								</div>
							</form>
						</li>
					</ul>
					
					<ul class="nav navbar-nav navbar-right" role="navigation">
						<li role="presentation"><a  href="#"><i class=" fa fa-heart fa-lg"></i>&nbsp; <span class=" nav-description">Favorites</span></a></li>
						<li role="presentation"><a  href="#"><i class=" fa fa-bell fa-lg"></i>&nbsp; <span class=" nav-description">Notifications<sup><span class="badge badge-danger badge-notify">8</span></sup></span></a></li>
						<li role="presentation" class= " dropdown">
							<a ...

CSS

#header
{
  position: relative;
  z-index: 1010;
}
/* nav styling*/
.navbar-default{
	
	border-bottom: 0.5px solid rgb(180,180,180);
}
.navbar-brand{
	font-family:Comic Sans MS;
	color:rgb(0,50,150);
	font-size:150%;
	font-weight:italic;
}
/*end*/

/*desktop bar related*/
@media(max-width:767px)
{
	.desktop-bar{
    /*margin: 10px 10px 10px 10px;*/
	display:none;}

}
.mob-nav{
	margin: 0px;
   padding: 0px;
   display: -webkit-flex;
   display:         flex;
   -webkit-flex-flow: row;
           flex-flow: row;
	-webkit-flex-wrap: nowrap; 
			flex-wrap: nowrap;
	-webkit-justify-content: flex-start; /* Safari */
			justify-content: flex-start;
}
.mob-home{
	-webkit-order: 1; /* Safari */
			order: 1;
	-webkit-flex-grow: 1; /* Safari */
			flex-grow: 1;
	margin-left:-1em;
}
.mob-search{
	/*width:50%;
	margin-top:0.2em;*/
	margin-top:0.5em;
	-webkit-order: 2; /* Safari */
			order: 2;
	-webkit-flex-grow: 2; /* Safari */
			flex-grow: 2;
	min-width:6em;
	size:50%
}
.mob-notify{
	-webkit-order: 3; /* Safari */
			order: 3;
	-webkit-flex-grow: 1; /* Safari */
			flex-grow: 1;
	min-width:5em;
}
.mob-more{
	/*width:7em;*/
	-webkit-order: 4; /* Safari */
			order:4;
	-webkit-flex-grow: 2; /* Safari */
			flex-grow: 2;
	min-width:7em;
}

@media(min-width:768px)
{
	.mobile-bar{
    /*margin: 10px 10px 10px 10px;*/
	display:none;}	
}
/*end*/

.wrapper{
	padding-top:50px;
}
.badge-danger {
  background-color: #d43f3a;
  
}

.badge-mob-notify{
	margin-left:-0.5em;
	margin-top:-0.5em;
}

JavaScript

$(document).ready(function () {
        $('.dropdown-toggle').dropdown();
    });