-
-
Save MalithHatananchchige/d4643d5aba85c1546319 to your computer and use it in GitHub Desktop.
header with search icon for mobile
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="header "> | |
| <!-- START MOBILE CONTROLS --> | |
| <div class="container-fluid relative"> | |
| <!-- LEFT SIDE --> | |
| <div class="pull-left full-height visible-sm visible-xs"> | |
| <!-- START ACTION BAR --> | |
| <div class="header-inner"> | |
| <a href="#" class="btn-link toggle-sidebar visible-sm-inline-block visible-xs-inline-block padding-5" data-toggle="sidebar"> | |
| <span class="icon-set menu-hambuger"></span> | |
| </a> | |
| </div> | |
| <!-- END ACTION BAR --> | |
| </div> | |
| <div class="pull-center hidden-md hidden-lg"> | |
| <div class="header-inner"> | |
| <div class="brand inline"> | |
| <img src="assets/img/logo.png" alt="logo" data-src="assets/img/logo.png" data-src-retina="assets/img/logo_2x.png" width="78" height="22"> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- RIGHT SIDE --> | |
| <div class="pull-right full-height visible-sm visible-xs"> | |
| <!-- START ACTION BAR --> | |
| <div class="header-inner"> | |
| <a href="#" class="btn-link m-r-10 fs-16" data-toggle="search"><i class="pg-search"></i></a> | |
| <a href="#" class="btn-link visible-sm-inline-block visible-xs-inline-block" data-toggle="quickview" data-toggle-element="#quickview"> | |
| <span class="icon-set menu-hambuger-plus"></span> | |
| </a> | |
| </div> | |
| <!-- END ACTION BAR --> | |
| </div> | |
| </div> | |
| <!-- END MOBILE CONTROLS --> | |
| <div class=" pull-left sm-table hidden-xs hidden-sm"> | |
| <div class="header-inner"> | |
| <div class="brand inline"> | |
| <img src="assets/img/logo.png" alt="logo" data-src="assets/img/logo.png" data-src-retina="assets/img/logo_2x.png" width="78" height="22"> | |
| </div> | |
| <!-- START NOTIFICATION LIST --> | |
| <ul class="notification-list no-margin hidden-sm hidden-xs b-grey b-l b-r no-style p-l-30 p-r-20"> | |
| <li class="p-r-15 inline"> | |
| <div class="dropdown"> | |
| <a href="javascript:;" id="notification-center" class="icon-set globe-fill" data-toggle="dropdown"> | |
| <span class="bubble"></span> | |
| </a> | |
| <!-- START Notification Dropdown --> | |
| <div class="dropdown-menu notification-toggle" role="menu" aria-labelledby="notification-center"> | |
| <!-- START Notification --> | |
| <div class="notification-panel"> | |
| <!-- START Notification Body--> | |
| <div class="notification-body scrollable"> | |
| <!-- START Notification Item--> | |
| <div class="notification-item unread clearfix"> | |
| <!-- START Notification Item--> | |
| <div class="heading open"> | |
| <a href="#" class="text-complete pull-left"> | |
| <i class="pg-map fs-16 m-r-10"></i> | |
| <span class="bold">Carrot Design</span> | |
| <span class="fs-12 m-l-10">David Nester</span> | |
| </a> | |
| <div class="pull-right"> | |
| <div class="thumbnail-wrapper d16 circular inline m-t-15 m-r-10 toggle-more-details"> | |
| <div><i class="fa fa-angle-left"></i> | |
| </div> | |
| </div> | |
| <span class=" time">few sec ago</span> | |
| </div> | |
| <div class="more-details"> | |
| <div class="more-details-inner"> | |
| <h5 class="semi-bold fs-16">“Apple’s Motivation - Innovation <br> | |
| distinguishes between <br> | |
| A leader and a follower.”</h5> | |
| <p class="small hint-text"> | |
| Commented on john Smiths wall. | |
| <br> via pages framework. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- END Notification Item--> | |
| <!-- START Notification Item Right Side--> | |
| <div class="option" data-toggle="tooltip" data-placement="left" title="mark as read"> | |
| <a href="#" class="mark"></a> | |
| </div> | |
| <!-- END Notification Item Right Side--> | |
| </div> | |
| <!-- START Notification Body--> | |
| <!-- START Notification Item--> | |
| <div class="notification-item clearfix"> | |
| <div class="heading"> | |
| <a href="#" class="text-danger pull-left"> | |
| <i class="fa fa-exclamation-triangle m-r-10"></i> | |
| <span class="bold">98% Server Load</span> | |
| <span class="fs-12 m-l-10">Take Action</span> | |
| </a> | |
| <span class="pull-right time">2 mins ago</span> | |
| </div> | |
| <!-- START Notification Item Right Side--> | |
| <div class="option"> | |
| <a href="#" class="mark"></a> | |
| </div> | |
| <!-- END Notification Item Right Side--> | |
| </div> | |
| <!-- END Notification Item--> | |
| <!-- START Notification Item--> | |
| <div class="notification-item clearfix"> | |
| <div class="heading"> | |
| <a href="#" class="text-warning-dark pull-left"> | |
| <i class="fa fa-exclamation-triangle m-r-10"></i> | |
| <span class="bold">Warning Notification</span> | |
| <span class="fs-12 m-l-10">Buy Now</span> | |
| </a> | |
| <span class="pull-right time">yesterday</span> | |
| </div> | |
| <!-- START Notification Item Right Side--> | |
| <div class="option"> | |
| <a href="#" class="mark"></a> | |
| </div> | |
| <!-- END Notification Item Right Side--> | |
| </div> | |
| <!-- END Notification Item--> | |
| <!-- START Notification Item--> | |
| <div class="notification-item unread clearfix"> | |
| <div class="heading"> | |
| <div class="thumbnail-wrapper d24 circular b-white m-r-5 b-a b-white m-t-10 m-r-10"> | |
| <img width="30" height="30" data-src-retina="assets/img/profiles/1x.jpg" data-src="assets/img/profiles/1.jpg" alt="" src="assets/img/profiles/1.jpg"> | |
| </div> | |
| <a href="#" class="text-complete pull-left"> | |
| <span class="bold">Revox Design Labs</span> | |
| <span class="fs-12 m-l-10">Owners</span> | |
| </a> | |
| <span class="pull-right time">11:00pm</span> | |
| </div> | |
| <!-- START Notification Item Right Side--> | |
| <div class="option" data-toggle="tooltip" data-placement="left" title="mark as read"> | |
| <a href="#" class="mark"></a> | |
| </div> | |
| <!-- END Notification Item Right Side--> | |
| </div> | |
| <!-- END Notification Item--> | |
| </div> | |
| <!-- END Notification Body--> | |
| <!-- START Notification Footer--> | |
| <div class="notification-footer text-center"> | |
| <a href="#" class="">Read all notifications</a> | |
| <a data-toggle="refresh" class="portlet-refresh text-black pull-right" href="#"> | |
| <i class="pg-refresh_new"></i> | |
| </a> | |
| </div> | |
| <!-- START Notification Footer--> | |
| </div> | |
| <!-- END Notification --> | |
| </div> | |
| <!-- END Notification Dropdown --> | |
| </div> | |
| </li> | |
| <li class="p-r-15 inline"> | |
| <a href="#" class="icon-set clip "></a> | |
| </li> | |
| <li class="p-r-15 inline"> | |
| <a href="#" class="icon-set grid-box"></a> | |
| </li> | |
| </ul> | |
| <!-- END NOTIFICATIONS LIST --> | |
| <a href="#" class="search-link" data-toggle="search"><i class="pg-search"></i>Type anywhere to <span class="bold">search</span></a> </div> | |
| </div> | |
| <div class=" pull-right"> | |
| <div class="header-inner"> | |
| <a href="#" class="btn-link icon-set menu-hambuger-plus m-l-20 sm-no-margin hidden-sm hidden-xs" data-toggle="quickview" data-toggle-element="#quickview"></a> | |
| </div> | |
| </div> | |
| <div class=" pull-right"> | |
| <!-- START User Info--> | |
| <div class="visible-lg visible-md m-t-10"> | |
| <div class="pull-left p-r-10 p-t-10 fs-16 font-heading"> | |
| <span class="semi-bold">David</span> <span class="text-master">Nest</span> | |
| </div> | |
| <div class="dropdown pull-right"> | |
| <button class="profile-dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> | |
| <span class="thumbnail-wrapper d32 circular inline m-t-5"> | |
| <img src="assets/img/profiles/avatar.jpg" alt="" data-src="assets/img/profiles/avatar.jpg" data-src-retina="assets/img/profiles/avatar_small2x.jpg" width="32" height="32"> | |
| </span> | |
| </button> | |
| <ul class="dropdown-menu profile-dropdown" role="menu"> | |
| <li><a href="#"><i class="pg-settings_small"></i> Settings</a> | |
| </li> | |
| <li><a href="#"><i class="pg-outdent"></i> Feedback</a> | |
| </li> | |
| <li><a href="#"><i class="pg-signals"></i> Help</a> | |
| </li> | |
| <li class="bg-master-lighter"> | |
| <a href="#" class="clearfix"> | |
| <span class="pull-left">Logout</span> | |
| <span class="pull-right"><i class="pg-power"></i></span> | |
| </a> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <!-- END User Info--> | |
| </div> | |
| </div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment