Code Structure
All code structure will be same just topbar right list will be replaced by following codes:
... <li class="dropdown more-dropdown topbar-logged-user"> // Code Start Here ... <div class="dropdown-menu more-apps"> <div class="user-profile-container"> <div class="user-profile clearfix"> <div class="admin-user-thumb"> ... </div> <div class="admin-user-info"> <ul> ... </ul> </div> </div> <div class="admin-bar"> <ul> ... </ul> </div> </div> <ul class="more-apps"> ... </ul> </div> </li> ...
Complete Code Structure
<!--Topbar Start Here--> <header class="topbar clearfix"> <!--Top Search Bar Start Here--> <div class="top-search-bar"> ... </div> <!--Top Search Bar End Here--> <!--Topbar Left Branding With Logo Start--> <div class="topbar-left pull-left"> ... </div> <!--Topbar Left Branding With Logo End--> <!--Topbar Right Start--> <div class="topbar-right pull-right"> <div class="clearfix"> <!--Mobile View Leftbar Toggle--> <ul class="left-bar-switch pull-left"> ... </ul> <ul class="pull-right top-right-icons"> <li>...</li> <li class="dropdown notifications-dropdown">...</li> <li>...</li> <li class="dropdown more-dropdown topbar-logged-user"> // Code Start Here ... <div class="dropdown-menu more-apps"> <div class="user-profile-container"> <div class="user-profile clearfix"> <div class="admin-user-thumb"> ... </div> <div class="admin-user-info"> <ul> ... </ul> </div> </div> <div class="admin-bar"> <ul> ... </ul> </div> </div> <ul class="more-apps"> ... </ul> </div> </li> </ul> </div> </div> <!--Topbar Right End--> </header> <!--Topbar End Here-->