Header
Header part containers logo section, toggle switch and top-right menu Code for Header looks like this
<header class="header">
<a target="_blank" href="index.html" class="logo">
<h1>JOSH</h1>
</a>
<nav class="navbar navbar-static-top" role="navigation">
<!-- Sidebar toggle button-->
<div>
<a target="_blank" href="#" class="navbar-btn sidebar-toggle" data-toggle="offcanvas" role="button">
<div class="responsive_nav">
<img src="img/nav_icon.png" width="25" height="17" alt="responsive icon" />
</div>
</a>
</div>
<div class="navbar-right">
<ul class="nav navbar-nav">
<li class="dropdown messages-menu">
<a target="_blank" href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="livicon" data-name="message-flag" data-loop="true" data-color="#ccc" data-hovercolor="#fff" data-size="28"></i>
<span class="label label-success">4</span>
</a>
<ul class="dropdown-menu">
<li class="header">You have 4 messages</li>
<li>
<!-- inner menu: contains the actual data -->
<ul class="menu">
<li>
<!-- start message -->
<a target="_blank" href="#">
<div class="pull-left">
<img src="img/avatar3.png" class="img-circle" alt="User Image" />
</div>
<h4>
Support Team
<small><i class="fa fa-clock-o"></i> 5 mins</small>
</h4>
<p>Why not buy a new awesome theme?</p>
</a>
</li>
<!-- end message -->
<li>
<a target="_blank" href="#">
<div class="pull-left">
<img src="img/avatar3.png" class="img-circle" alt="user image" />
</div>
<h4>
Admin
<small><i class="fa fa-clock-o"></i> 2 hours</small>
</h4>
<p>Why not buy a new awesome theme?</p>
</a>
</li>
<li>
<a target="_blank" href="#">
<div class="pull-left">
<img src="img/avatar3.png" class="img-circle" alt="user image" />
</div>
<h4>
Developers
<small><i class="fa fa-clock-o"></i> Today</small>
</h4>
<p>Why not buy a new awesome theme?</p>
</a>
</li>
<li>
<a target="_blank" href="#">
<div class="pull-left">
<img src="img/avatar3.png" class="img-circle" alt="user image" />
</div>
<h4>
Sales
<small><i class="fa fa-clock-o"></i> Yesterday</small>
</h4>
<p>Why not buy a new awesome theme?</p>
</a>
</li>
<li>
<a target="_blank" href="#">
<div class="pull-left">
<img src="img/avatar3.png" class="img-circle" alt="user image" />
</div>
<h4>
Reviewers
<small><i class="fa fa-clock-o"></i> 2 days</small>
</h4>
<p>Why not buy a new awesome theme?</p>
</a>
</li>
</ul>
</li>
<li class="footer"><a target="_blank" href="#">See All Messages</a>
</li>
</ul>
</li>
<li class="dropdown notifications-menu">
<a target="_blank" href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="livicon" data-name="bell" data-loop="true" data-color="#ccc" data-hovercolor="#fff" data-size="28"></i>
<span class="label label-warning">10</span>
</a>
<ul class="dropdown-menu">
<li class="header">You have 10 notifications</li>
<li>
<!-- inner menu: contains the actual data -->
<ul class="menu">
<li>
<a target="_blank" href="#">
<i class="ion ion-ios7-people info"></i> 5 members joined today
</a>
</li>
<li>
<a target="_blank" href="#">
<i class="fa fa-warning danger"></i> Very long description here...
</a>
</li>
<li>
<a target="_blank" href="#">
<i class="fa fa-users warning"></i> 5 new members joined
</a>
</li>
<li>
<a target="_blank" href="#">
<i class="ion ion-ios7-cart success"></i> 25 sales made
</a>
</li>
<li>
<a target="_blank" href="#">
<i class="ion ion-ios7-person danger"></i> You changed your
</a>
</li>
</ul>
</li>
<li class="footer"><a target="_blank" href="#">View all</a>
</li>
</ul>
</li>
<li class="dropdown user user-menu">
<a target="_blank" href="#" class="dropdown-toggle" data-toggle="dropdown" style="width:100px; padding:7px !important">
<img src="img/avatar3.png" width="35" class="img-circle img-responsive pull-left" height="35" alt="riot">
<div class="riot">Riot <i class="caret pull-right"></i>
</div>
</a>
<ul class="dropdown-menu">
<!-- User image -->
<li class="user-header bg-light-blue">
<img src="img/avatar3.png" class="img-circle" alt="User Image" />
<p>Riot Zeast Captain</p>
</li>
<!-- Menu Body -->
<li role="presentation" class="divider"></li>
<li><a target="_blank" href="#"><i class="livicon" data-name="user" data-s="18"></i> My Profile</a>
</li>
<li role="presentation"></li>
<li><a target="_blank" href="#"><i class="livicon" data-name="gears" data-s="18"></i> Account Settings</a>
</li>
<li role="presentation" class="divider"></li>
<!-- Menu Footer-->
<li class="user-footer">
<div class="pull-left"><a target="_blank" href="#"><i class="livicon" data-name="lock" data-s="18"></i> Lock</a>
</div>
<div class="pull-right"><a target="_blank" href="#"><i class="livicon" data-name="sign-out" data-s="18"></i> Logout</a>
</div>
</li>
</ul>
</li>
</ul>
</div>
</nav>
</header>Last updated