Header Template - Full HTML
<!-- Navbar Wrapper - Fixed Version -->
<header class="navbar navbar-fixed-top bg-primary">
<!-- Navbar Branding -->
<div class="navbar-branding bg-primary dark">
<a class="navbar-brand" href="../dashboard.html"> <b>Perfect</b> Admin </a>
<span id="toggle_sidemenu_l" class="glyphicons glyphicons-show_lines"></span>
<ul class="nav navbar-nav pull-right hidden">
<li>
<a href="#" class="sidebar-menu-toggle">
<span class="octicon octicon-ruby fs20 mr10 pull-right "></span>
</a>
</li>
</ul>
</div>
<!-- Left Navbar Menus -->
<ul class="nav navbar-nav navbar-left">
<li>
<a class="sidebar-menu-toggle" href="#">
<span class="octicon octicon-ruby fs18"></span>
</a>
</li>
<li>
<a class="topbar-menu-toggle" href="#">
<span class="glyphicons glyphicons-magic fs16"></span>
</a>
</li>
<li>
<span id="toggle_sidemenu_l2" class="glyphicon glyphicon-log-in fa-flip-horizontal hidden"></span>
</li>
<li class="dropdown hidden">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<span class="glyphicons glyphicons-settings fs14"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li>
<a href="../javascript:void(0);">
<span class="fa fa-times-circle-o pr5 text-primary"></span> Reset LocalStorage </a>
</li>
<li>
<a href="../javascript:void(0);">
<span class="fa fa-slideshare pr5 text-info"></span> Force Global Logout </a>
</li>
<li class="divider mv5"></li>
<li>
<a href="../javascript:void(0);">
<span class="fa fa-tasks pr5 text-danger"></span> Run Cron Job </a>
</li>
<li>
<a href="../javascript:void(0);">
<span class="fa fa-wrench pr5 text-warning"></span> Maintenance Mode </a>
</li>
</ul>
</li>
<li>
<a class="request-fullscreen toggle-active" href="#">
<span class="octicon octicon-screen-full fs18"></span>
</a>
</li>
</ul>
<!-- Left Navbar Search -->
<form class="navbar-form navbar-left navbar-search ml5" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search..." value="Search...">
</div>
</form>
<!-- Right Navbar Menus -->
<ul class="nav navbar-nav navbar-right">
<!-- Article Listing Menu -->
<li class="dropdown dropdown-item-slide">
<a class="dropdown-toggle pl10 pr10" data-toggle="dropdown" href="#">
<span class="octicon octicon-radio-tower fs18"></span>
</a>
<ul class="dropdown-menu dropdown-hover dropdown-persist pn w350 bg-white animated animated-shorter fadeIn" role="menu">
<li class="bg-light p8">
<span class="fw600 pl5 lh30"> Notifications</span>
<span class="label label-warning label-sm pull-right lh20 h-20 mt5 mr5">12</span>
</li>
<li class="p10 br-t item-1">
<div class="media">
<a class="media-left" href="#"> <img src="../../assets/img/avatars/7.jpg" class="mw40" alt="holder-img"> </a>
<div class="media-body va-m">
<h5 class="media-heading mv5">Article <small class="text-muted">- 08/16/22</small> </h5> Last Updated 36 days ago by
<a class="text-system" href="#"> Max </a>
</div>
</div>
</li>
<li class="p10 br-t item-2">
<div class="media">
<a class="media-left" href="#"> <img src="../../assets/img/avatars/7.jpg" class="mw40" alt="holder-img"> </a>
<div class="media-body va-m">
<h5 class="media-heading mv5">Article <small class="text-muted">- 08/16/22</small> </h5> Last Updated 36 days ago by
<a class="text-system" href="#"> Max </a>
</div>
</div>
</li>
<li class="p10 br-t item-3">
<div class="media">
<a class="media-left" href="#"> <img src="../../assets/img/avatars/7.jpg" class="mw40" alt="holder-img"> </a>
<div class="media-body va-m">
<h5 class="media-heading mv5">Article <small class="text-muted">- 08/16/22</small> </h5> Last Updated 36 days ago by
<a class="text-system" href="#"> Max </a>
</div>
</div>
</li>
<li class="p10 br-t item-4">
<div class="media">
<a class="media-left" href="#"> <img src="../../assets/img/avatars/7.jpg" class="mw40" alt="holder-img"> </a>
<div class="media-body va-m">
<h5 class="media-heading mv5">Article <small class="text-muted">- 08/16/22</small> </h5> Last Updated 36 days ago by
<a class="text-system" href="#"> Max </a>
</div>
</div>
</li>
</ul>
</li>
<!-- Select Language Menu -->
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<span class="flag-xs flag-us"></span>
<span class="fw600">US</span>
</a>
<ul class="dropdown-menu animated animated-short flipInX" role="menu">
<li>
<a href="javascript:void(0);" class="fw600">
<span class="flag-xs flag-in mr10"></span> Hindu </a>
</li>
<li>
<a href="javascript:void(0);" class="fw600">
<span class="flag-xs flag-tr mr10"></span> Turkish </a>
</li>
<li>
<a href="javascript:void(0);" class="fw600">
<span class="flag-xs flag-es mr10"></span> Spanish </a>
</li>
</ul>
</li>
<li class="ph10 pv20"> <i class="fa fa-circle text-tp fs8"></i>
</li>
<!-- User Menu -->
<li class="dropdown">
<a href="#" class="dropdown-toggle fw600 p15" data-toggle="dropdown"> <img src="../../assets/img/avatars/5.jpg" alt="avatar" class="mw30 br64 mr15">
<span>John.Smith</span>
<span class="caret caret-tp"></span>
</a>
<ul class="dropdown-menu dropdown-persist pn w250 bg-white" role="menu">
<li class="bg-light br-b br-light p8">
<span class="pull-left ml10">
<select id="user-status">
<optgroup label="Current Status:">
<option value="1-1">Away</option>
<option value="1-2">Offline</option>
<option value="1-3" selected="selected">Online</option>
</optgroup>
</select>
</span>
<span class="pull-right mr10">
<select id="user-role">
<optgroup label="Logged in As:">
<option value="1-1">Client</option>
<option value="1-2">Editor</option>
<option value="1-3" selected="selected">Admin</option>
</optgroup>
</select>
</span>
<div class="clearfix"></div>
</li>
<li class="of-h">
<a href="#" class="fw600 p12 animated animated-short fadeInUp">
<span class="fa fa-envelope pr5"></span> Messages
<span class="pull-right lh20 h-20 label label-warning label-sm">2</span>
</a>
</li>
<li class="br-t of-h">
<a href="#" class="fw600 p12 animated animated-short fadeInUp">
<span class="fa fa-user pr5"></span> Friends
<span class="pull-right lh20 h-20 label label-warning label-sm">6</span>
</a>
</li>
<li class="br-t of-h">
<a href="#" class="fw600 p12 animated animated-short fadeInDown">
<span class="fa fa-gear pr5"></span> Account Settings </a>
</li>
<li class="br-t of-h">
<a href="#" class="fw600 p12 animated animated-short fadeInDown">
<span class="fa fa-power-off pr5"></span> Logout </a>
</li>
</ul>
</li>
</ul>
</header> <!-- End Header Wrapper -->
Note: This HTML contains absolute image urls which should be corrected to properly match the desired pages url.