Created
December 2, 2022 16:10
-
-
Save Lisandronunez/f9ade35955d26ad9b14e6637c6464b56 to your computer and use it in GitHub Desktop.
navbar & sidebar
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 data-component="navbar"> | |
| <nav class="navbar p-0 fixed-top"> | |
| <button class="navbar-toggler navbar-toggler-left rounded-0 border-0" type="button" data-toggle="collapse" data-target="#megamenu-dropdown" aria-controls="megamenu-dropdown" aria-expanded="false" aria-label="Toggle navigation"> | |
| <i class="fa fa-bars"></i><span class="ml-3">Advanced</span> | |
| </button> | |
| <div><a class="navbar-brand px-1" href="#"><img src="http://kris.agentfire2.com/wp-content/mu-plugins/agentfire-shared-library/img/agentfire.svg" class="d-inline-block mt-1" alt="AgentFire Logo" height="40"></a> | |
| <div class="right-links float-right mr-4"> | |
| <a href="#" class="home"><i class="fa fa-home mr-3"></i></a> | |
| <div class="d-inline dropdown rounded-0 mx-3"> | |
| <a class="dropdown-toggle" id="tools" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" href="#"><i class="fa fa-wrench" aria-hidden="true"></i></a> | |
| <div class="dropdown-menu dropdown-menu-right rounded-0 text-center" aria-labelledby="tools"> | |
| <a class="dropdown-item px-2" href="#">Recompile CSS</a> | |
| </div> | |
| </div> <!-- /.dropdown --> | |
| <div class="d-inline dropdown mr-3"> | |
| <a class="dropdown-toggle" id="notifications" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" href="#"><span>10</span><i class="fa fa-bell"></i></a> | |
| <div class="dropdown-menu dropdown-menu-right rounded-0 pt-0" aria-labelledby="notifications"> | |
| <div class="list-group"> | |
| <div class="lg"> | |
| <a href="#" class="list-group-item list-group-item-action flex-column align-items-start active"> | |
| <h5 class="mb-1">Real Estate Marketing Automation: 6 Simple Systems</h5> | |
| <p class="mb-0">17 October 2016 | 9:32 pm</p> | |
| </a> | |
| <a href="#" class="list-group-item list-group-item-action flex-column align-items-start"> | |
| <h5 class="mb-1">How to Generate Seller Leads For $0.88 Using...</h5> | |
| <p class="mb-0">3 October 2016 | 9:58 pm</p> | |
| </a> | |
| <a href="#" class="list-group-item list-group-item-action flex-column align-items-start"> | |
| <h5 class="mb-1">AgentFire Re-Opens For Business. New Services,...</h5> | |
| <p class="mb-0">20 September 2016 | 6:28 pm</p> | |
| </a> | |
| <a href="#" class="list-group-item list-group-item-action flex-column align-items-start"> | |
| <h5 class="mb-1">Real Estate Blogging 101: How To Get Better...</h5> | |
| <p class="mb-0">7 September 2016 | 3:03 pm</p> | |
| </a> | |
| <a href="#" class="list-group-item list-group-item-action flex-column align-items-start"> | |
| <h5 class="mb-1">How To Get More Listings With Strategic...</h5> | |
| <p class="mb-0">16 August 2016 | 8:26 pm</p> | |
| </a> | |
| <a href="#" class="list-group-item list-group-item-action flex-column align-items-start"> | |
| <h5 class="mb-1">How To Find Strategic Real Estate Partners as...</h5> | |
| <p class="mb-0">9 August 2016 | 6:44 pm</p> | |
| </a> | |
| <a href="#" class="list-group-item list-group-item-action flex-column align-items-start"> | |
| <h5 class="mb-1">Top 10 Real Estate Marketing Tools</h5> | |
| <p class="mb-0">2 August 2016 | 10:25 pm</p> | |
| </a> | |
| <a href="#" class="list-group-item list-group-item-action flex-column align-items-start"> | |
| <h5 class="mb-1">The Beginner Guide To Google Adwords For Real...</h5> | |
| <p class="mb-0">27 July 2016 | 1:15 am</p> | |
| </a> | |
| <a href="#" class="list-group-item list-group-item-action flex-column align-items-start"> | |
| <h5 class="mb-1">The Complete Guide To Hyper-Local SEO For Realtors</h5> | |
| <p class="mb-0">19 July 2016 | 5:51 pm</p> | |
| </a> | |
| <a href="#" class="list-group-item list-group-item-action flex-column align-items-start"> | |
| <h5 class="mb-1">How We Took Ed Eakin’s Real Estate Website...</h5> | |
| <p class="mb-0">11 July 2016 | 6:19 pm</p> | |
| </a> | |
| </div> <!-- /.lg --> | |
| </div> <!-- /.list group --> | |
| </div> <!-- /.dropdown-menu --> | |
| </div> <!-- /.dropdown --> | |
| <div class="d-inline dropdown mr-3"> | |
| <a class="dropdown-toggle" id="messages" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" href="#"><i class="fa fa-envelope"></i></a> | |
| <div class="dropdown-menu dropdown-menu-right rounded-0 text-center" aria-labelledby="messages"> | |
| <a class="dropdown-item">There are no new messages</a> | |
| </div> <!-- /.dropdown-menu --> | |
| </div> <!-- /.dropdown --> | |
| <div class="d-inline dropdown"> | |
| <a class="dropdown-toggle" id="messages" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" href="#"> | |
| <img src="http://1.gravatar.com/avatar/47db31bd2e0b161008607d84c74305b5?s=96&d=mm&r=g"> | |
| </a> | |
| <div class="dropdown-menu dropdown-menu-right rounded-0" aria-labelledby="messages"> | |
| <a class="dropdown-item" href="#">Edit my profile</a> | |
| <a class="dropdown-item" href="#">Log Out</a> | |
| </div> <!-- /.dropdown-menu --> | |
| </div> <!-- /.dropdown --> | |
| </div> <!-- /.right-links --> | |
| </div> | |
| <div class="megamenu"> | |
| <div class="collapse navbar-collapse" id="megamenu-dropdown"> | |
| <div class="megamenu-links"> | |
| <div class="row"> | |
| <div class="col-md-3 px-0"> | |
| <a class="btn rounded-0 border-0 d-flex w-100 justify-content-between p-3 pl-5" data-toggle="collapse" href="#menuOne" aria-expanded="false" aria-controls="collapseExample" id="more">Slider Revolution | |
| <i class="fa fa-minus float-right" aria-hidden="true"></i> | |
| <i class="fa fa-plus float-right" aria-hidden="true"></i> | |
| </a> <!-- button close --> | |
| <div class="collapse" id="menuOne"> | |
| <div class="list-group border-0"> | |
| <a href="#" class="list-group-item list-group-item-action border-0 pl-4 py-3">Slider Revolution</a> | |
| <a href="#" class="list-group-item list-group-item-action border-0 pl-4 py-3">Navigation Editor</a> | |
| <a href="#" class="list-group-item list-group-item-action border-0 pl-4 py-3">Add-Ons</a> | |
| </div> <!-- /.list-group --> | |
| </div><!-- /.collapse --> | |
| </div> <!-- /.col-md-3 --> | |
| <div class="col-md-3 px-0"> | |
| <a class="btn rounded-0 border-0 d-flex w-100 justify-content-between p-3" data-toggle="collapse" href="#menuTwo" aria-expanded="false" aria-controls="collapseExample" id="more">Flyouts | |
| <i class="fa fa-minus float-right" aria-hidden="true"></i> | |
| <i class="fa fa-plus float-right" aria-hidden="true"></i> | |
| </a> <!-- button close --> | |
| <div class="collapse" id="menuTwo"> | |
| <div class="list-group border-0"> | |
| <a href="#" class="list-group-item list-group-item-action border-0 pl-4 py-3">All Flyouts</a> | |
| <a href="#" class="list-group-item list-group-item-action border-0 pl-4 py-3">Add new Flyout</a> | |
| <a href="#" class="list-group-item list-group-item-action border-0 pl-4 py-3">Re-Order</a> | |
| </div> <!-- /.list-group --> | |
| </div><!-- /.collapse --> | |
| </div> <!-- /.col-md-3 --> | |
| <div class="col-md-3 px-0"> | |
| <a class="btn rounded-0 border-0 d-flex w-100 justify-content-between p-3" data-toggle="collapse" href="#menuThree" aria-expanded="false" aria-controls="collapseExample" id="more">Cornerstone | |
| <i class="fa fa-minus float-right" aria-hidden="true"></i> | |
| <i class="fa fa-plus float-right" aria-hidden="true"></i> | |
| </a> <!-- button close --> | |
| <div class="collapse" id="menuThree"> | |
| <div class="list-group border-0"> | |
| <a href="#" class="list-group-item list-group-item-action border-0 pl-4 py-3">Cornerstone</a> | |
| <a href="#" class="list-group-item list-group-item-action border-0 pl-4 py-3">Cornerstone</a> | |
| <a href="#" class="list-group-item list-group-item-action border-0 pl-4 py-3">Cornerstone</a> | |
| </div> <!-- /.list-group --> | |
| </div><!-- /.collapse --> | |
| </div> <!-- /.col-md-3 --> | |
| </div> <!-- /.row --> | |
| <div class="row"> | |
| <div class="col-md-3 px-0"> | |
| <a class="btn rounded-0 border-0 d-flex w-100 justify-content-between p-3 pl-5" data-toggle="collapse" href="#menuFour" aria-expanded="false" aria-controls="collapseExample" id="more">Ess. Grid | |
| <i class="fa fa-minus float-right" aria-hidden="true"></i> | |
| <i class="fa fa-plus float-right" aria-hidden="true"></i> | |
| </a> <!-- button close --> | |
| <div class="collapse" id="menuFour"> | |
| <div class="list-group border-0"> | |
| <a href="#" class="list-group-item list-group-item-action border-0 pl-4 py-3">Essential Grid</a> | |
| <a href="#" class="list-group-item list-group-item-action border-0 pl-4 py-3">Item Skin Editor</a> | |
| <a href="#" class="list-group-item list-group-item-action border-0 pl-4 py-3">Meta Data Handling</a> | |
| <a href="#" class="list-group-item list-group-item-action border-0 pl-4 py-3">Search Settings</a> | |
| <a href="#" class="list-group-item list-group-item-action border-0 pl-4 py-3">Global Settings</a> | |
| <a href="#" class="list-group-item list-group-item-action border-0 pl-4 py-3">Import/Export</a> | |
| </div> <!-- /.list-group --> | |
| </div><!-- /.collapse --> | |
| </div> <!-- /.col-md-3 --> | |
| <div class="col-md-3 px-0"> | |
| <a class="btn rounded-0 border-0 d-flex w-100 justify-content-between p-3" data-toggle="collapse" href="#menuFive" aria-expanded="false" aria-controls="collapseExample" id="more">AgentFire CTA Plus | |
| <i class="fa fa-minus float-right" aria-hidden="true"></i> | |
| <i class="fa fa-plus float-right" aria-hidden="true"></i> | |
| </a> <!-- button close --> | |
| <div class="collapse" id="menuFive"> | |
| <div class="list-group border-0"> | |
| <a href="#" class="list-group-item list-group-item-action border-0 pl-4 py-3">Essential Grid</a> | |
| <a href="#" class="list-group-item list-group-item-action border-0 pl-4 py-3">Item Skin Editor</a> | |
| <a href="#" class="list-group-item list-group-item-action border-0 pl-4 py-3">Meta Data Handling</a> | |
| <a href="#" class="list-group-item list-group-item-action border-0 pl-4 py-3">Search Settings</a> | |
| <a href="#" class="list-group-item list-group-item-action border-0 pl-4 py-3">Global Settings</a> | |
| <a href="#" class="list-group-item list-group-item-action border-0 pl-4 py-3">Import/Export</a> | |
| </div> <!-- /.list-group --> | |
| </div><!-- /.collapse --> | |
| </div> <!-- /.col-md-3 --> | |
| </div> | |
| </div> <!-- /.megamenu-links --> | |
| </div></div> | |
| </nav> | |
| </div> <!-- END TOP NAVBAR --> | |
| <div data-component="sidebar"> | |
| <div class="sidebar"> | |
| <ul class="list-group flex-column d-inline-block first-menu"> | |
| <li class="list-group-item pl-3 py-2"> | |
| <a href="#"><i class="fa fa-user-o" aria-hidden="true"><span class="ml-2 align-middle">Reporting</span></i></a> | |
| <ul class="list-group flex-column d-inline-block submenu"> | |
| <li class="list-group-item pl-4"> | |
| <a href="#" class="">Dashboard</a> | |
| <ul class="list-group flex-column d-inline-block sub-submenu"> | |
| <span class="arrow"></span> | |
| <li class="list-group-item pl-4"> | |
| <a href="#">Home</a> | |
| </li> | |
| <li class="list-group-item pl-4"> | |
| <a href="#">My Sites</a> | |
| </li> | |
| </ul> | |
| </li> | |
| <li class="list-group-item pl-4"> | |
| <a href="">SEO</a> | |
| <ul class="list-group flex-column d-inline-block sub-submenu"> | |
| <span class="arrow" style="top:113px;"></span> | |
| <li class="list-group-item pl-4"> | |
| <a href="#">Dashboard</a> | |
| </li> | |
| <li class="list-group-item pl-4"> | |
| <a href="#">Titles & Metas</a> | |
| </li> | |
| <li class="list-group-item pl-4"> | |
| <a href="#">Social</a> | |
| </li> | |
| <li class="list-group-item pl-4"> | |
| <a href="#">XML Sitemaps</a> | |
| </li> | |
| <li class="list-group-item pl-4"> | |
| <a href="#">Advanced</a> | |
| </li> | |
| <li class="list-group-item pl-4"> | |
| <a href="#">Tools</a> | |
| </li> | |
| <li class="list-group-item pl-4"> | |
| <a href="#">Search Console</a> | |
| </li> | |
| <li class="list-group-item pl-4"> | |
| <a href="#">Go Premium</a> | |
| </li> | |
| <li class="list-group-item pl-4"> | |
| <a href="#">Manual</a> | |
| </li> | |
| </ul> | |
| </li> | |
| </ul> <!-- /.submenu --> | |
| </li> <!-- /.list-group-item --> | |
| <li class="list-group-item pl-3 py-2"> | |
| <a href="#"><i class="fa fa-user-o" aria-hidden="true"><span class="ml-2 align-middle">Content</span></i></a> | |
| <ul class="list-group flex-column d-inline-block submenu"> | |
| <li class="list-group-item pl-4"> | |
| <a href="#" class="">Posts</a> | |
| <ul class="list-group flex-column d-inline-block sub-submenu"> | |
| <span class="arrow"></span> | |
| <li class="list-group-item pl-4"> | |
| <a href="#">All Posts</a> | |
| </li> | |
| <li class="list-group-item pl-4"> | |
| <a href="#">Add New</a> | |
| </li> | |
| <li class="list-group-item pl-4"> | |
| <a href="#">Categories</a> | |
| </li> | |
| <li class="list-group-item pl-4"> | |
| <a href="#">Tags</a> | |
| </li> | |
| </ul> | |
| </li> <!-- end Posts --> | |
| <li class="list-group-item pl-4"> | |
| <a href="#" class="">Blog Assist</a> | |
| <ul class="list-group flex-column d-inline-block sub-submenu"> | |
| <span class="arrow" style="top:114px;"></span> | |
| <li class="list-group-item pl-4"> | |
| <a href="#">Add New Blog Post</a> | |
| </li> | |
| <li class="list-group-item pl-4"> | |
| <a href="#">Feed Sources</a> | |
| </li> | |
| <li class="list-group-item pl-4"> | |
| <a href="#">Add New Feed Source</a> | |
| </li> | |
| </ul> | |
| </li> <!-- end Blog Assist --> | |
| <li class="list-group-item pl-4"> | |
| <a href="#" class="">Pages</a> | |
| <ul class="list-group flex-column d-inline-block sub-submenu"> | |
| <span class="arrow" style="top:166px;"></span> | |
| <li class="list-group-item pl-4"> | |
| <a href="#">All Pages</a> | |
| </li> | |
| <li class="list-group-item pl-4"> | |
| <a href="#">Add New</a> | |
| </li> | |
| </ul> | |
| </li> <!-- end Pages --> | |
| <li class="list-group-item pl-4"> | |
| <a href="#" class="">Area Content</a> | |
| <ul class="list-group flex-column d-inline-block sub-submenu"> | |
| <span class="arrow" style="top:220px;"></span> | |
| <li class="list-group-item pl-4"> | |
| <a href="#">All Cities</a> | |
| </li> | |
| <li class="list-group-item pl-4"> | |
| <a href="#">Add New City</a> | |
| </li> | |
| <li class="list-group-item pl-4"> | |
| <a href="#">All Neighborhoods</a> | |
| </li> | |
| <li class="list-group-item pl-4"> | |
| <a href="#">Add New Neighborhood</a> | |
| </li> | |
| </ul> | |
| </li> <!-- end Area Content --> | |
| <li class="list-group-item pl-4"> | |
| <a href="#" class="">Manual Listings</a> | |
| <ul class="list-group flex-column d-inline-block sub-submenu"> | |
| <span class="arrow" style="top:272px;"></span> | |
| <li class="list-group-item pl-4"> | |
| <a href="#">View All Listings</a> | |
| </li> | |
| <li class="list-group-item pl-4"> | |
| <a href="#">Add New Listing</a> | |
| </li> | |
| <li class="list-group-item pl-4"> | |
| <a href="#">Status</a> | |
| </li> | |
| <li class="list-group-item pl-4"> | |
| <a href="#">Locations</a> | |
| </li> | |
| <li class="list-group-item pl-4"> | |
| <a href="#">Property Types</a> | |
| </li> | |
| <li class="list-group-item pl-4"> | |
| <a href="#">Import Listing</a> | |
| </li> | |
| </ul> | |
| </li> <!-- end Manual Listings --> | |
| <li class="list-group-item pl-4"> | |
| <a href="#" class="">Testimonials</a> | |
| <ul class="list-group flex-column d-inline-block sub-submenu"> | |
| <span class="arrow" style="top:323px;"></span> | |
| <li class="list-group-item pl-4"> | |
| <a href="#">View All</a> | |
| </li> | |
| <li class="list-group-item pl-4"> | |
| <a href="#">Add New</a> | |
| </li> | |
| <li class="list-group-item pl-4"> | |
| <a href="#">Categories</a> | |
| </li> | |
| </ul> | |
| </li> <!-- end Testimonials --> | |
| <li class="list-group-item pl-4"> | |
| <a href="#" class="">Team Members</a> | |
| <ul class="list-group flex-column d-inline-block sub-submenu"> | |
| <span class="arrow" style="top:377px;"></span> | |
| <li class="list-group-item pl-4"> | |
| <a href="#">All Members</a> | |
| </li> | |
| <li class="list-group-item pl-4"> | |
| <a href="#">Add New Member</a> | |
| </li> | |
| <li class="list-group-item pl-4"> | |
| <a href="#">Designations</a> | |
| </li> | |
| <li class="list-group-item pl-4"> | |
| <a href="#">Specialties</a> | |
| </li> | |
| <li class="list-group-item pl-4"> | |
| <a href="#">Areas</a> | |
| </li> | |
| <li class="list-group-item pl-4"> | |
| <a href="#">All Locations</a> | |
| </li> | |
| <li class="list-group-item pl-4"> | |
| <a href="#">Add New Location</a> | |
| </li> | |
| </ul> | |
| </li> <!-- end Team Members --> | |
| </ul> <!-- /.submenu --> | |
| </li> <!-- /.list-group-item --> | |
| <li class="list-group-item pl-3 py-2"> | |
| <a href="#"> | |
| <i class="fa fa-user-o" aria-hidden="true"><span class="ml-2 align-middle">Engagement</span></i> | |
| </a> | |
| <ul class="list-group flex-column d-inline-block submenu"> | |
| <li class="list-group-item pl-4"> | |
| <a href="#" class="">Comments</a> | |
| <ul class="list-group flex-column d-inline-block sub-submenu"> | |
| <span class="arrow"></span> | |
| <li class="list-group-item pl-4"> | |
| <a href="#">Comments</a> | |
| </li> | |
| </ul> | |
| </li> | |
| <li class="list-group-item pl-4"> | |
| <a href="#" class="">Forms</a> | |
| <ul class="list-group flex-column d-inline-block sub-submenu"> | |
| <span class="arrow" style="top:114px;"></span> | |
| <li class="list-group-item pl-4"> | |
| <a href="#">All Forms</a> | |
| </li> | |
| <li class="list-group-item pl-4"> | |
| <a href="#">New Form</a> | |
| </li> | |
| <li class="list-group-item pl-4"> | |
| <a href="#">All Entries</a> | |
| </li> | |
| <li class="list-group-item pl-4"> | |
| <a href="#">Gravity Forms</a> | |
| </li> | |
| <li class="list-group-item pl-4"> | |
| <a href="#">Import/Export</a> | |
| </li> | |
| <li class="list-group-item pl-4"> | |
| <a href="#">Gravity Forms Tutorials</a> | |
| </li> | |
| </ul> | |
| </li> | |
| <li class="list-group-item pl-4"> | |
| <a href="#" class="">Home Valuation</a> | |
| <ul class="list-group flex-column d-inline-block sub-submenu"> | |
| <span class="arrow" style="top:166px;"></span> | |
| <li class="list-group-item pl-4"> | |
| <a href="#">View All Leads</a> | |
| </li> | |
| </ul> | |
| </li> | |
| </ul> <!-- /.submenu --> | |
| </li> <!-- /.list-group-item --> | |
| <li class="list-group-item pl-3 py-2"> | |
| <a href="#"><i class="fa fa-user-o" aria-hidden="true"><span class="ml-2 align-middle">Image Center</span></i></a> | |
| <ul class="list-group flex-column d-inline-block submenu"> | |
| <li class="list-group-item pl-4"> | |
| <a href="#" class="">Media Library</a> | |
| <ul class="list-group flex-column d-inline-block sub-submenu"> | |
| <span class="arrow"></span> | |
| <li class="list-group-item pl-4"> | |
| <a href="#">Media Library</a> | |
| </li> | |
| <li class="list-group-item pl-4"> | |
| <a href="#">Add New</a> | |
| </li> | |
| </ul> | |
| </li> | |
| <li class="list-group-item pl-4"> | |
| <a href="#" class="">Soliloquy Slider</a> | |
| <ul class="list-group flex-column d-inline-block sub-submenu"> | |
| <span class="arrow" style="top:114px;"></span> | |
| <li class="list-group-item pl-4"> | |
| <a href="#">All Sliders</a> | |
| </li> | |
| <li class="list-group-item pl-4"> | |
| <a href="#">Add New</a> | |
| </li> | |
| </ul> | |
| </li> | |
| </ul> | |
| </li> | |
| <li class="list-group-item pl-3 py-2"> | |
| <a href="#"><i class="fa fa-user-o" aria-hidden="true"><span class="ml-2 align-middle">Settings</span></i></a> | |
| <ul class="list-group flex-column d-inline-block submenu"> | |
| <li class="list-group-item pl-4"> | |
| <a href="#" class="">Users</a> | |
| <ul class="list-group flex-column d-inline-block sub-submenu"> | |
| <span class="arrow"></span> | |
| <li class="list-group-item pl-4"> | |
| <a href="#">All Users</a> | |
| </li> | |
| <li class="list-group-item pl-4"> | |
| <a href="#">Add New</a> | |
| </li> | |
| <li class="list-group-item pl-4"> | |
| <a href="#">Your Profile</a> | |
| </li> | |
| </ul> | |
| </li> | |
| <li class="list-group-item pl-4"> | |
| <a href="#" class="">AgentFire Settings</a> | |
| <ul class="list-group flex-column d-inline-block sub-submenu"> | |
| <span class="arrow" style="top:114px;"></span> | |
| <li class="list-group-item pl-4"> | |
| <a href="#">Home Valuation</a> | |
| </li> | |
| <li class="list-group-item pl-4"> | |
| <a href="#">Testimonials</a> | |
| </li> | |
| <li class="list-group-item pl-4"> | |
| <a href="#">Team Members</a> | |
| </li> | |
| <li class="list-group-item pl-4"> | |
| <a href="#">Area Content</a> | |
| </li> | |
| <li class="list-group-item pl-4"> | |
| <a href="#">Manual Listings</a> | |
| </li> | |
| </ul> | |
| </li> | |
| <li class="list-group-item pl-4"> | |
| <a href="#" class="">Grids Settings</a> | |
| <ul class="list-group flex-column d-inline-block sub-submenu"> | |
| <span class="arrow" style="top:166px;"></span> | |
| <li class="list-group-item pl-4"> | |
| <a href="#">Ess. Grid Search Settings</a> | |
| </li> | |
| <li class="list-group-item pl-4"> | |
| <a href="#">Ess. Grid Global Settings</a> | |
| </li> | |
| </ul> | |
| </li> | |
| <li class="list-group-item pl-4"> | |
| <a href="#" class="">Plugin Settings</a> | |
| <ul class="list-group flex-column d-inline-block sub-submenu"> | |
| <span class="arrow" style="top:220px;"></span> | |
| <li class="list-group-item pl-4"> | |
| <a href="#">Soliloquy</a> | |
| </li> | |
| <li class="list-group-item pl-4"> | |
| <a href="#">Flickr - Pick a Picture</a> | |
| </li> | |
| <li class="list-group-item pl-4"> | |
| <a href="#">Google Analytics</a> | |
| </li> | |
| <li class="list-group-item pl-4"> | |
| <a href="#">Google Maps</a> | |
| </li> | |
| <li class="list-group-item pl-4"> | |
| <a href="#">JackBox</a> | |
| </li> | |
| <li class="list-group-item pl-4"> | |
| <a href="#">Media</a> | |
| </li> | |
| <li class="list-group-item pl-4"> | |
| <a href="#">No Page Comment</a> | |
| </li> | |
| <li class="list-group-item pl-4"> | |
| <a href="#">Post Types Order</a> | |
| </li> | |
| <li class="list-group-item pl-4"> | |
| <a href="#">Shortcode any widget</a> | |
| </li> | |
| <li class="list-group-item pl-4"> | |
| <a href="#">WP RSS Images</a> | |
| </li> | |
| <li class="list-group-item pl-4"> | |
| <a href="#">SNAP</a> | |
| </li> | |
| <li class="list-group-item pl-4"> | |
| <a href="#">WP Sitemap Page</a> | |
| </li> | |
| </ul> | |
| </li> | |
| <li class="list-group-item pl-4"> | |
| <a href="#" class="">WordPress Settings</a> | |
| <ul class="list-group flex-column d-inline-block sub-submenu"> | |
| <span class="arrow" style="top:272px;"></span> | |
| <li class="list-group-item pl-4"> | |
| <a href="#">General</a> | |
| </li> | |
| <li class="list-group-item pl-4"> | |
| <a href="#">Discussion</a> | |
| </li> | |
| <li class="list-group-item pl-4"> | |
| <a href="#">Reading</a> | |
| </li> | |
| </ul> | |
| </li> | |
| <li class="list-group-item pl-4"> | |
| <a href="#" class="">Re-Order</a> | |
| <ul class="list-group flex-column d-inline-block sub-submenu"> | |
| <span class="arrow" style="top:323px;"></span> | |
| <li class="list-group-item pl-4"> | |
| <a href="#">Posts</a> | |
| </li> | |
| <li class="list-group-item pl-4"> | |
| <a href="#">Pages</a> | |
| </li> | |
| <li class="list-group-item pl-4"> | |
| <a href="#">Media Library</a> | |
| </li> | |
| <li class="list-group-item pl-4"> | |
| <a href="#">Blog Assist</a> | |
| </li> | |
| <li class="list-group-item pl-4"> | |
| <a href="#">Area Content</a> | |
| </li> | |
| <li class="list-group-item pl-4"> | |
| <a href="#">Manual Listings</a> | |
| </li> | |
| <li class="list-group-item pl-4"> | |
| <a href="#">Testimonials</a> | |
| </li> | |
| <li class="list-group-item pl-4"> | |
| <a href="#">Team Members</a> | |
| </li> | |
| <li class="list-group-item pl-4"> | |
| <a href="#">Flyouts</a> | |
| </li> | |
| </ul> | |
| </li> | |
| <li class="list-group-item pl-4"> | |
| <a href="#" class="">Site Appearance</a> | |
| <ul class="list-group flex-column d-inline-block sub-submenu"> | |
| <span class="arrow" style="top:377px;"></span> | |
| <li class="list-group-item pl-4"> | |
| <a href="#">Widgets</a> | |
| </li> | |
| <li class="list-group-item pl-4"> | |
| <a href="#">Menus</a> | |
| </li> | |
| </ul> | |
| </li> | |
| </ul> | |
| </li> | |
| <li class="list-group-item pl-3 py-2"> | |
| <a href="#"><i class="fa fa-user-o" aria-hidden="true"><span class="ml-2 align-middle">Support</span></i></a> | |
| <ul class="list-group flex-column d-inline-block submenu"> | |
| <li class="list-group-item pl-4"> | |
| <a href="#" class="">Training</a> | |
| <ul class="list-group flex-column d-inline-block sub-submenu"> | |
| <span class="arrow"></span> | |
| <li class="list-group-item pl-4"> | |
| <a href="#">Video Tutorials</a> | |
| </li> | |
| </ul> | |
| </li> | |
| <li class="list-group-item pl-4"> | |
| <a href="#" class="">Tutorials</a> | |
| <ul class="list-group flex-column d-inline-block sub-submenu"> | |
| <span class="arrow" style="top:114px;"></span> | |
| <li class="list-group-item pl-4"> | |
| <a href="#">Help Desk</a> | |
| </li> | |
| </ul> | |
| </li> | |
| <li class="list-group-item pl-4"> | |
| <a href="#" class="">Ask a Question</a> | |
| <ul class="list-group flex-column d-inline-block sub-submenu"> | |
| <span class="arrow" style="top:166px;"></span> | |
| <li class="list-group-item pl-4"> | |
| <a href="#">Send Support Request</a> | |
| </li> | |
| </ul> | |
| </li> | |
| </ul> | |
| </li> | |
| </ul> <!-- /.first-menu --> | |
| </div> <!-- /.sidebar --> | |
| </div> | |
| <div class="wp-content"> | |
| <div class="container-fluid"> | |
| CONTENT GOES HERE | |
| </div> | |
| </div> |
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
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script> |
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
| // Custom utility classes | |
| $spacer: 5px; | |
| $padding-1: 5px; | |
| $padding-2: 15px; | |
| $padding-3: 25px; | |
| $padding-4: 35px; | |
| $padding-5: 45px; | |
| $spacer-1: $spacer * 1; | |
| $spacer-2: $spacer * 2; | |
| $spacer-3: $spacer * 3; | |
| $spacer-4: $spacer * 5; | |
| $spacer-5: $spacer * 7; | |
| .p-1 { | |
| padding: $padding-1 !important; | |
| } | |
| .p-2 { | |
| padding: $padding-2 !important; | |
| } | |
| .p-3 { | |
| padding: $padding-3 !important; | |
| } | |
| .p-4 { | |
| padding: $padding-4 !important; | |
| } | |
| .p-5 { | |
| padding: $padding-5 !important; | |
| } | |
| //left | |
| .pl-1 { | |
| padding-left: $padding-1 !important; | |
| } | |
| .pl-2 { | |
| padding-left: $padding-2 !important; | |
| } | |
| .pl-3 { | |
| padding-left: $padding-3 !important; | |
| } | |
| .pl-4 { | |
| padding-left: $padding-4 !important; | |
| } | |
| .pl-5 { | |
| padding-left: $padding-5 !important; | |
| } | |
| //right | |
| .pr-1 { | |
| padding-right: $padding-1 !important; | |
| } | |
| .pr-2 { | |
| padding-right: $padding-2 !important; | |
| } | |
| .pr-3 { | |
| padding-right: $padding-3 !important; | |
| } | |
| .pr-4 { | |
| padding-right: $padding-4 !important; | |
| } | |
| .pr-5 { | |
| padding-right: $padding-5 !important; | |
| } | |
| //top | |
| .pt-1 { | |
| padding-top: $padding-1 !important; | |
| } | |
| .pt-2 { | |
| padding-top: $padding-2 !important; | |
| } | |
| .pt-3 { | |
| padding-top: $padding-3 !important; | |
| } | |
| .pt-4 { | |
| padding-top: $padding-4 !important; | |
| } | |
| .pt-5 { | |
| padding-top: $padding-5 !important; | |
| } | |
| //bottom | |
| .pb-1 { | |
| padding-bottom: $padding-1 !important; | |
| } | |
| .pb-2 { | |
| padding-bottom: $padding-2 !important; | |
| } | |
| .pb-3 { | |
| padding-bottom: $padding-3 !important; | |
| } | |
| .pb-4 { | |
| padding-bottom: $padding-4 !important; | |
| } | |
| .pb-5 { | |
| padding-bottom: $padding-5 !important; | |
| } | |
| //left & right | |
| .px-1 { | |
| padding-left: $padding-1 !important; | |
| padding-right: $padding-1 !important; | |
| } | |
| .px-2 { | |
| padding-left: $padding-2 !important; | |
| padding-right: $padding-2 !important; | |
| } | |
| .px-3 { | |
| padding-left: $padding-3 !important; | |
| padding-right: $padding-3 !important; | |
| } | |
| .px-4 { | |
| padding-left: $padding-4 !important; | |
| padding-right: $padding-4 !important; | |
| } | |
| .px-5 { | |
| padding-left: $padding-5 !important; | |
| padding-right: $padding-5 !important; | |
| } | |
| //top & bottom | |
| .py-1 { | |
| padding-top: $padding-1 !important; | |
| padding-bottom: $padding-1 !important; | |
| } | |
| .py-2 { | |
| padding-top: $padding-2 !important; | |
| padding-bottom: $padding-2 !important; | |
| } | |
| .py-3 { | |
| padding-top: $padding-3 !important; | |
| padding-bottom: $padding-3 !important; | |
| } | |
| .py-4 { | |
| padding-top: $padding-4 !important; | |
| padding-bottom: $padding-4 !important; | |
| } | |
| .py-5 { | |
| padding-top: $padding-5 !important; | |
| padding-bottom: $padding-5 !important; | |
| } | |
| .m-1 { | |
| margin: $spacer-1 !important; | |
| } | |
| .m-2 { | |
| margin: $spacer-2 !important; | |
| } | |
| .m-3 { | |
| margin: $spacer-3 !important; | |
| } | |
| .m-4 { | |
| margin: $spacer-4 !important; | |
| } | |
| .m-5 { | |
| margin: $spacer-5 !important; | |
| } | |
| //left | |
| .ml-1 { | |
| margin-left: $spacer-1 !important; | |
| } | |
| .ml-2 { | |
| margin-left: $spacer-2 !important; | |
| } | |
| .ml-3 { | |
| margin-left: $spacer-3 !important; | |
| } | |
| .ml-4 { | |
| margin-left: $spacer-4 !important; | |
| } | |
| .ml-5 { | |
| margin-left: $spacer-5 !important; | |
| } | |
| //right | |
| .mr-1 { | |
| margin-right: $spacer-1 !important; | |
| } | |
| .mr-2 { | |
| margin-right: $spacer-2 !important; | |
| } | |
| .mr-3 { | |
| margin-right: $spacer-3 !important; | |
| } | |
| .mr-4 { | |
| margin-right: $spacer-4 !important; | |
| } | |
| .mr-5 { | |
| margin-right: $spacer-5 !important; | |
| } | |
| //top | |
| .mt-1 { | |
| margin-top: $spacer-1 !important; | |
| } | |
| .mt-2 { | |
| margin-top: $spacer-2 !important; | |
| } | |
| .mt-3 { | |
| margin-top: $spacer-3 !important; | |
| } | |
| .mt-4 { | |
| margin-top: $spacer-4 !important; | |
| } | |
| .mt-5 { | |
| margin-top: $spacer-5 !important; | |
| } | |
| //bottom | |
| .mb-1 { | |
| margin-bottom: $spacer-1 !important; | |
| } | |
| .mb-2 { | |
| margin-bottom: $spacer-2 !important; | |
| } | |
| .mb-3 { | |
| margin-bottom: $spacer-3 !important; | |
| } | |
| .mb-4 { | |
| margin-bottom: $spacer-4 !important; | |
| } | |
| .mb-5 { | |
| margin-bottom: $spacer-5 !important; | |
| } | |
| //left & right | |
| .mx-1 { | |
| margin-left: $spacer-1 !important; | |
| margin-right: $spacer-1 !important; | |
| } | |
| .mx-2 { | |
| margin-left: $spacer-2 !important; | |
| margin-right: $spacer-2 !important; | |
| } | |
| .mx-3 { | |
| margin-left: $spacer-3 !important; | |
| margin-right: $spacer-3 !important; | |
| } | |
| .mx-4 { | |
| margin-left: $spacer-4 !important; | |
| margin-right: $spacer-4 !important; | |
| } | |
| .mx-5 { | |
| margin-left: $spacer-5 !important; | |
| margin-right: $spacer-5 !important; | |
| } | |
| //top & bottom | |
| .my-1 { | |
| margin-top: $spacer-1 !important; | |
| margin-bottom: $spacer-1 !important; | |
| } | |
| .my-2 { | |
| margin-top: $spacer-2 !important; | |
| margin-bottom: $spacer-2 !important; | |
| } | |
| .my-3 { | |
| margin-top: $spacer-3 !important; | |
| margin-bottom: $spacer-3 !important; | |
| } | |
| .my-4 { | |
| margin-top: $spacer-4 !important; | |
| margin-bottom: $spacer-4 !important; | |
| } | |
| .my-5 { | |
| margin-top: $spacer-5 !important; | |
| margin-bottom: $spacer-5 !important; | |
| } | |
| @import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800'); | |
| $font-stack: 'Open Sans', sans-serif; | |
| $primary-color: #009fff; | |
| $secondary-color: #292a2c; | |
| $background: #eee; | |
| $browser-context: 16; | |
| @function em($pixels, $context: $browser-context) { | |
| @return #{$pixels/$context}em; | |
| } | |
| $transition-duration: 600ms; | |
| $transition-delay: $transition-duration; | |
| $sidebar-transition: $transition-duration opacity $transition-delay, $transition-duration visibility $transition-delay; | |
| body { | |
| background-color: gray; | |
| font-family: $font-stack; | |
| } | |
| .wp-content { | |
| margin-top: 60px; | |
| margin-left: 75px; | |
| } | |
| /* Remove unde | |
| a:hover { | |
| text-decoration: none; | |
| } | |
| /* Remove Bootstrap button outline */ | |
| button, a { | |
| .focus { | |
| outline: 0; | |
| -webkit-box-shadow: none !important; | |
| box-shadow: none !important; | |
| } | |
| &:focus { | |
| outline: 0; | |
| -webkit-box-shadow: none !important; | |
| box-shadow: none !important; | |
| } | |
| } | |
| [data-component='navbar'] { | |
| .navbar { | |
| background-color: #fff; | |
| } | |
| .navbar-toggler { | |
| line-height: 2.4; | |
| margin-left: 75px; | |
| span { | |
| text-transform: uppercase; | |
| font-size: em(16); | |
| font-weight: 400; | |
| font-family: 'Lato', sans-serif; | |
| display: none; | |
| } | |
| } | |
| .navbar-toggler[aria-expanded="true"] { | |
| color: #009fff; | |
| span {display:initial; color: #009fff;} | |
| i {color: #009fff;} | |
| } | |
| .navbar-collapse { | |
| background-color: $secondary-color; | |
| margin-left: 75px; | |
| } | |
| .navbar-nav { | |
| height: 100vw; | |
| } | |
| //animation transition | |
| .collapsing { | |
| -webkit-transition: height .3s ease; | |
| -o-transition: height .3s ease; | |
| transition: height .3s ease; | |
| } | |
| .navbar-brand { | |
| background-color: $primary-color; | |
| height: 60px; | |
| width: 75px; | |
| text-align: center; | |
| } | |
| /* Right Menu Dropdowns */ | |
| ::-webkit-scrollbar { | |
| width: 0px; | |
| background: transparent; | |
| } | |
| .right-links { | |
| i { | |
| color: #000; | |
| font-size: 20px; | |
| line-height: 2.8; | |
| } | |
| } | |
| .home { | |
| border-right: 1px solid #ababab; | |
| } | |
| .dropdown-toggle::after { | |
| display:none; | |
| } | |
| .dropdown-item { | |
| color: #292b2c; | |
| font-size: em(12); | |
| } | |
| /* Notification */ | |
| .dropdown { | |
| position: relative; | |
| span { | |
| color: #fff; | |
| position: absolute; | |
| width: 15px; | |
| height: 15px; | |
| top: -8px; | |
| right: -3px; | |
| background-color: red; | |
| border-radius: 50%; | |
| text-align: center; | |
| font-size: em(10); | |
| font-weight: 600; | |
| } | |
| img { | |
| border-radius: 50%; | |
| height: 40px; | |
| } | |
| } | |
| /* Notification Dropdown */ | |
| .list-group { | |
| .lg { | |
| height: 500px; | |
| width: 270px; | |
| overflow: auto; | |
| } | |
| .list-group-item { | |
| border-radius: 0; | |
| letter-spacing: 0.5px; | |
| } | |
| h5 { | |
| font-size: em(11); | |
| font-weight: 700; | |
| line-height: 2; | |
| } | |
| p { | |
| font-size: em(9); | |
| font-weight: 400; | |
| line-height: 2; | |
| } | |
| } | |
| .megamenu { | |
| #menuOne, #menuTwo, #menuThree { | |
| position:absolute; | |
| width:100%; | |
| z-index:1; | |
| } | |
| .megamenu-links { | |
| background-color: #EEEEEE; | |
| height: 100vh; | |
| overflow: hidden; | |
| } | |
| .btn { | |
| font-size: em(14); | |
| font-weight: 400; | |
| letter-spacing: 0.5px; | |
| &:hover { | |
| background-color: #292a2c; | |
| color: #fff; | |
| } | |
| } | |
| a[aria-expanded=true] .fa-plus { | |
| display: none; | |
| } | |
| a[aria-expanded=false] .fa-minus { | |
| display: none; | |
| } | |
| [aria-expanded="true"] { | |
| background-color: #292a2c; | |
| color: #fff; | |
| i { | |
| color: #fff; | |
| font-size: em(20); | |
| } | |
| } | |
| [aria-expanded="false"] { | |
| background-color: #eee; | |
| color: #292a2c; | |
| border-radius: 0; | |
| i { | |
| color: #009fff; | |
| font-size: em(20); | |
| } | |
| } | |
| .list-group { | |
| height: 100vw; | |
| background-color: #292a2c; | |
| } | |
| .list-group-item { | |
| border-radius: 0; | |
| background-color: #292a2c; | |
| font-size: em(12); | |
| color: #fff; | |
| &:hover { | |
| background-color: #009fff; | |
| } | |
| } | |
| } | |
| } //END TOP NAVBAR | |
| [data-component='sidebar'] { | |
| .sidebar { | |
| position: fixed; | |
| z-index: 9999; | |
| } | |
| //black menu | |
| .first-menu { | |
| position: fixed; | |
| background-color: $secondary-color; | |
| height: 100vw; | |
| width: 75px; | |
| top: 60px; | |
| overflow: hidden; | |
| transition: width .5s; | |
| a { | |
| color: #fff; | |
| } | |
| i { | |
| font-size: 24px; | |
| } | |
| span { | |
| font-size: 14px; | |
| white-space: nowrap; | |
| font-family: 'Open Sans', sans-serif; | |
| opacity: 0; | |
| visibility: hidden; | |
| } | |
| &:hover span { | |
| opacity: 1; | |
| visibility: visible; | |
| } | |
| .list-group-item { | |
| border-radius: 0; | |
| &:hover { | |
| background-color: $primary-color; | |
| } | |
| } | |
| } | |
| .first-menu:hover { | |
| width: 160px; | |
| } | |
| .list-group-item { | |
| font-size: 14px; | |
| } | |
| //blue menu | |
| .submenu { | |
| position: fixed; | |
| left: 160px; | |
| width: 195px; | |
| top: 60px; | |
| background-color: $primary-color; | |
| height: 100vw; | |
| opacity: 0; | |
| visibility: hidden; | |
| transition: $sidebar-transition; | |
| .list-group-item { | |
| margin-top: 8px; | |
| } | |
| } | |
| .first-menu li:hover .submenu { | |
| visibility: visible; | |
| opacity: 1; | |
| } | |
| //white menu | |
| .sub-submenu { | |
| position: fixed; | |
| background-color: #fff; | |
| left: 355px; | |
| top: 60px; | |
| height: 100vw; | |
| width: 195px; | |
| opacity: 0; | |
| visibility: hidden; | |
| transition: $sidebar-transition; | |
| a { | |
| color: $primary-color; | |
| } | |
| .list-group-item:hover { | |
| background-color: transparent; | |
| } | |
| } | |
| .submenu li:hover .sub-submenu { | |
| visibility: visible; | |
| opacity: 1; | |
| } | |
| .list-group-item { | |
| background-color: transparent; | |
| border: none; | |
| border-radius: 0; | |
| } | |
| .arrow { | |
| position: fixed; | |
| left: 329px; | |
| width: 0; | |
| height: 0; | |
| border-top: 27px solid transparent; | |
| border-bottom: 27px solid transparent; | |
| border-right: 27px solid white; | |
| &:nth-child(3) {top: 20px;} | |
| } | |
| } |
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
| <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" /> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment