Code Snippet To Create Above Results
<div class = "container-fluid wdpk-header-container wdpk-transparent-navbar">
<!-- Body Overlay element for offCanvas Menu -->
<div id = "wdpk-offcanvas-overlay"></div>
<!-- Row For Top Bar -->
<div class = "row h-100 d-none d-lg-block">
<!-- Wrapper For Top Bar -->
<div class = "wdpk-topbar-wrapper">
<!-- Container For Contents of Top Bar -->
<div class = "container">
<div class = "row h-100">
<div class = "col-lg-6 h-100 align-self-center ">
<!-- Navbar For Topbar -->
<nav class = "wdpk-topbar-menu" role = "navigation">
<!-- Parent Items ul -->
<ul class = "justify-content-start">
<li class = "wdpk-topbar-item">
<a class = "" href = "#">
<i class = "fas fa fa-paper-plane"></i><strong> Email:</strong>
email@address.com
</a>
</li>
<li class = "wdpk-topbar-item"> |</li>
<li class = "wdpk-topbar-item">
<a class = "" href = "#">
<i class = "fas fa fa-phone"></i><strong> Call:</strong> +1-124-125-1234
</a>
</li>
</ul>
<!-- / Parent Items ul -->
</nav>
<!-- / Navbar For Topbar -->
</div>
<div class = "col-lg-6
justify-content-end
text-right h-100
align-self-center d-flex">
<!-- Social Item of Top Bar -->
<a href = "#" class = "wdpk-topbar-social wdpk-facebook">
<div class = "wdpk-topbar-item">
<i class = "fab fa fa-facebook"></i>
</div>
</a>
<!-- /Social Item of Top Bar -->
<!-- Social Item of Top Bar -->
<a href = "#" class = "wdpk-topbar-social wdpk-twitter">
<div class = "wdpk-topbar-item">
<i class = "fab fa fa-twitter"></i>
</div>
</a>
<!-- /Social Item of Top Bar -->
<!-- Social Item of Top Bar -->
<a href = "#" class = "wdpk-topbar-social wdpk-google">
<div class = "wdpk-topbar-item">
<i class = "fab fa fa-google-plus"></i>
</div>
</a>
<!-- /Social Item of Top Bar -->
<!-- Social Item of Top Bar -->
<a href = "#" class = "wdpk-topbar-social wdpk-behance">
<div class = "wdpk-topbar-item">
<i class = "fab fa fa-behance"></i>
</div>
</a>
<!-- /Social Item of Top Bar -->
<!-- Social Item of Top Bar -->
<a href = "#" class = "wdpk-topbar-social wdpk-youtube">
<div class = "wdpk-topbar-item">
<i class = "fab fa fa-youtube"></i>
</div>
</a>
<!-- /Social Item of Top Bar -->
<!-- Social Item of Top Bar -->
<a href = "#" class = "wdpk-topbar-social wdpk-vimeo">
<div class = "wdpk-topbar-item">
<i class = "fab fa fa-vimeo"></i>
</div>
</a>
<!-- /Social Item of Top Bar -->
<!-- Social Item of Top Bar -->
<a href = "#" class = "wdpk-topbar-social wdpk-linkedin">
<div class = "wdpk-topbar-item">
<i class = "fab fa fa-linkedin"></i>
</div>
</a>
<!-- /Social Item of Top Bar -->
<!-- Social Item of Top Bar -->
<a href = "#" class = "wdpk-topbar-social wdpk-pinterest">
<div class = "wdpk-topbar-item">
<i class = "fab fa fa-pinterest"></i>
</div>
</a>
<!-- /Social Item of Top Bar -->
<!-- Social Item of Top Bar -->
<a href = "#" class = "wdpk-topbar-social wdpk-rss">
<div class = "wdpk-topbar-item">
<i class = "fab fa fa-rss"></i>
</div>
</a>
<!-- /Social Item of Top Bar -->
</div>
</div>
</div>
<!-- /Container For Contents of Top Bar -->
</div>
<!-- /Wrapper For Top Bar -->
</div>
<!-- /Row For Top Bar -->
<!-- Mobile Header -->
<div class = "row wdpk-mobile-header">
<div class = "container">
<div class = "row">
<div class = "col-6 align-self-center wdpk-mobile-header-branding">
<a href = "http://localhost:4000">
<img alt = "WoodPecker Logo"
src = "/assets/WoodPecker-logo-white-f305484af6bad999c0e0077758e33c431256271fded9c3aa1ab635cddde43264.png">
</a>
</div>
<div class = "col-6 align-self-center wdpk-menu-icon">
<a id = "wdpk-mobile-menu-icon">
<i class = "fas fa fa-bars"></i>
</a>
</div>
</div>
</div>
</div>
<!-- /Mobile Header -->
<!-- Row For Main Navigation -->
<div class = "row">
<!-- Navbar -->
<div class = "wdpk-navbar">
<!-- Container For Header Contents -->
<div class = "container">
<!-- Row For Header Contents -->
<div class = "row h-100">
<!-- Extras Area For The Navigation Bar -->
<div class = "wdpk-nav-wrap-extras col-lg-2 order-lg-0 align-self-center justify-content-start ">
<div class = "wdpk-menu-extras ">
<div class = "wdpk-menu-cart wdpk-menu-extra-item d-flex">
<a href = "#">
<i class = "fab fa fa-behance"></i>
</a>
</div>
<div class = "wdpk-menu-search wdpk-menu-extra-item d-flex ">
<a href = "#">
<i class = "fab fa fa-facebook-f"></i>
</a>
</div>
<div class = "wdpk-menu-search wdpk-menu-extra-item d-flex ">
<a href = "#">
<i class = "fab fa fa-google-plus-g"></i>
</a>
</div>
</div>
</div>
<!-- /Extras Area For The Navigation Bar -->
<!-- Logo Area For Navbar -->
<div class = "col-lg-8 order-lg-1 text-center wdpk-nav-branding align-self-center">
<a href = "http://localhost:4000">
<img alt = "WoodPecker Logo"
src = "/assets/WoodPecker-logo-white-f305484af6bad999c0e0077758e33c431256271fded9c3aa1ab635cddde43264.png">
</a>
</div>
<!-- / Logo Area Area For Navbar -->
<!-- Extras Area For The Navigation Bar -->
<div class = "wdpk-nav-wrap-extras col-lg-2 d-none justify-content-end order-lg-2 align-self-center ">
<div class = "wdpk-menu-extras">
<div class = "wdpk-menu-cart wdpk-menu-extra-item d-flex">
<a href = "#">
<i class = "fas fa fa-shopping-cart">
<p class = "wdpk-menu-cart-items">10</p>
</i>
</a>
<!-- Shopping Cart Dropdown -->
<!-- Shopping Cart Dropdown -->
<div class = "card wdpk-cart-dropdown" style = "top: 78px;">
<div class = "card-body">
<h6 class = "card-title">My Cart</h6>
<!-- Product in cart -->
<div class = "wdpk-cartdrop-prdct-wrap">
<div class = "wdpk-cartdrop-img"><img alt = "Product"
src = "/assets/product-d75db3f8b583b285477ab3e981b828b843d71e2356ba6edfe049f011a1eb997d.jpg"></div>
<div class = "card-text wdpk-cartdrop-name">
<span class = "wdpk-product-name">Red T-Shirt</span>
<span class = "wdpk-product-subtitle">$39.99 Per Pcs</span>
</div>
<div class = "wdpk-cartdrop-close"><i class = "fas fa fa-times"></i></div>
</div>
<!-- /Product in cart -->
<!-- Product in cart -->
<div class = "wdpk-cartdrop-prdct-wrap">
<div class = "wdpk-cartdrop-img"><img alt = "Product"
src = "/assets/product-d75db3f8b583b285477ab3e981b828b843d71e2356ba6edfe049f011a1eb997d.jpg"></div>
<div class = "card-text wdpk-cartdrop-name">
<span class = "wdpk-product-name">Red T-Shirt</span>
<span class = "wdpk-product-subtitle">$39.99 Per Pcs</span>
</div>
<div class = "wdpk-cartdrop-close"><i class = "fas fa fa-times"></i></div>
</div>
<!-- /Product in cart -->
<hr>
<!-- Cart Totals Item -->
<div class = "wdpk-cartdrop-totals">
<div class = "wdpk-cartdrop-taxname">Vat 4%</div>
<div class = "wdpk-cartdrop-amount">$10</div>
</div>
<!-- /Cart Totals Item -->
<!-- Cart Totals Item -->
<div class = "wdpk-cartdrop-totals">
<div class = "wdpk-cartdrop-taxname">Grand Total</div>
<div class = "wdpk-cartdrop-amount">$100</div>
</div>
<!-- /Cart Totals Item -->
<!-- Checkout Button -->
<div class = "justify-content-end mt-3 d-flex">
<button class = "btn btn-primary btn-sm text-right">Checkout</button>
</div>
<!-- /Checkout Button -->
</div>
</div>
<!-- /Shopping Cart Dropdown -->
<!-- /Shopping Cart Dropdown -->
</div>
<div class = "wdpk-menu-search wdpk-menu-extra-item d-flex ">
<a href = "#">
<i class = "fas fa fa-search"></i>
</a>
</div>
</div>
</div>
<!-- /Extras Area For The Navigation Bar -->
</div>
<!-- /Container For Header Contents -->
</div>
<!-- /Row For Header Contents -->
</div>
<!-- / Navbar -->
</div>
<!-- / Row For Main Navigation -->
<!-- Row For Bottom Bar -->
<div class = "row">
<!-- Bottom Bar -->
<div class = "wdpk-navbar wdpk-offCanvas wdpk-bottombar wdpk-sticky-navbar">
<!-- Container For Header Contents -->
<div class = "container">
<!-- Row For Header Contents -->
<div class = "row h-100">
<!-- Navigation Menu Area For Navbar -->
<div class = "col-lg-12 align-self-center wdpk-nav-wrap ">
<!-- Navbar For Header -->
<nav class = "wdpk-nav" role = "navigation">
<!-- Parent Items ul -->
<ul class = "wdpk-menu">
<!-- Primary menu items -->
<li class = "wdpk-dropCorrect ">
<a id = "wdpk-demos" class = "wdpk-hasDropdown wdpk-menu-hover" href = "#">
Demos <i class = "fa fa-angle-down wdpkDropdownCaret"></i>
<i class = "fas fa fa-plus wdpk-offcanvas-plus"></i>
</a>
<div class = "wdpk-menu-container">
<ul class = "wdpk-dropDown">
<!-- Dropdown menu items -->
<li>
<a id = "wdpk-main-demo" href = "http://localhost:4000/thing1.html"
class = "wdpk-dropDown-item">Main Demo
<i class = "fas fa fa-angle-right wdpk-submenu-caret"></i>
<i class = "fas fa fa-plus wdpk-offcanvas-plus"></i>
</a>
</li>
<!-- /Dropdown menu items -->
<!-- Dropdown menu items -->
<li>
<a id = "wdpk-ecommerce" href = "http://localhost:4000/thing2.html"
class = "wdpk-dropDown-item">Ecommerce
<i class = "fas fa fa-angle-right wdpk-submenu-caret"></i>
<i class = "fas fa fa-plus wdpk-offcanvas-plus"></i>
</a>
</li>
<!-- /Dropdown menu items -->
<!-- Dropdown menu items -->
<li>
<a id = "wdpk-corporate" href = "http://localhost:4000/thing3.html"
class = "wdpk-dropDown-item">Corporate
<i class = "fas fa fa-angle-right wdpk-submenu-caret"></i>
<i class = "fas fa fa-plus wdpk-offcanvas-plus"></i>
</a>
</li>
<!-- /Dropdown menu items -->
<!-- Dropdown menu items -->
<li>
<a id = "wdpk-event" href = "http://localhost:4000/thing3.html"
class = "wdpk-dropDown-item">Event
<i class = "fas fa fa-angle-right wdpk-submenu-caret"></i>
<i class = "fas fa fa-plus wdpk-offcanvas-plus"></i>
</a>
</li>
<!-- /Dropdown menu items -->
<!-- Dropdown menu items -->
<li>
<a id = "wdpk-fitness" href = "http://localhost:4000/thing3.html"
class = "wdpk-dropDown-item">Fitness
<i class = "fas fa fa-angle-right wdpk-submenu-caret"></i>
<i class = "fas fa fa-plus wdpk-offcanvas-plus"></i>
</a>
</li>
<!-- /Dropdown menu items -->
<!-- Dropdown menu items -->
<li>
<a id = "wdpk-restaurant" href = "http://localhost:4000/thing3.html"
class = "wdpk-dropDown-item">Retaurant
<i class = "fas fa fa-angle-right wdpk-submenu-caret"></i>
<i class = "fas fa fa-plus wdpk-offcanvas-plus"></i>
</a>
</li>
<!-- /Dropdown menu items -->
<!-- Dropdown menu items -->
<li>
<a id = "wdpk-mobile-app" href = "http://localhost:4000/thing3.html"
class = "wdpk-dropDown-item">Mobile App
<i class = "fas fa fa-angle-right wdpk-submenu-caret"></i>
<i class = "fas fa fa-plus wdpk-offcanvas-plus"></i>
</a>
</li>
<!-- /Dropdown menu items -->
<!-- Dropdown menu items -->
<li>
<a id = "wdpk-magazine" href = "http://localhost:4000/thing3.html"
class = "wdpk-dropDown-item">Magazine
<i class = "fas fa fa-angle-right wdpk-submenu-caret"></i>
<i class = "fas fa fa-plus wdpk-offcanvas-plus"></i>
</a>
</li>
<!-- /Dropdown menu items -->
</ul>
</div>
<!-- Primary menu items -->
</li><li class = "wdpk-dropCorrect ">
<a id = "wdpk-layouts" class = "wdpk-hasDropdown wdpk-menu-hover" href = "#">
Layouts <i class = "fa fa-angle-down wdpkDropdownCaret"></i>
<i class = "fas fa fa-plus wdpk-offcanvas-plus"></i>
</a>
<div class = "wdpk-menu-container">
<ul class = "wdpk-dropDown">
<!-- Dropdown menu items -->
<li class = "wdpk-hasSubMenu wdpk-dropCorrect">
<a id = "wdpk-topbar" href = "http://localhost:4000#" class = "wdpk-dropDown-item">Topbar
<i class = "fas fa fa-angle-right wdpk-submenu-caret"></i>
<i class = "fas fa fa-plus wdpk-offcanvas-plus"></i>
</a>
<div class = "wdpk-menu-container">
<ul class = "wdpk-dropDown">
<!-- Dropdown sub menu items -->
<li>
<a id = "wdpk-topbar-light"
href = "http://localhost:4000/demos/main-demo/header/mega-menu.html"
class = "wdpk-dropDown-item">Light
<span class = "badge badge-danger">Popular</span>
</a>
</li>
<!-- /Dropdown sub menu items -->
<!-- Dropdown sub menu items -->
<li>
<a id = "wdpk-topbar-dark"
href = "http://localhost:4000/demos/main-demo/header/dark-topbar.html"
class = "wdpk-dropDown-item">Dark
</a>
</li>
<!-- /Dropdown sub menu items -->
<!-- Dropdown sub menu items -->
<li>
<a id = "wdpk-topbar-transparent"
href = "http://localhost:4000/demos/main-demo/header/transparent.html"
class = "wdpk-dropDown-item">Transparent
</a>
</li>
<!-- /Dropdown sub menu items -->
<!-- Dropdown sub menu items -->
<li>
<a id = "wdpk-topbar-colored"
href = "http://localhost:4000/demos/main-demo/header/gradient-topbar.html"
class = "wdpk-dropDown-item">Gradient
</a>
</li>
<!-- /Dropdown sub menu items -->
<!-- Dropdown sub menu items -->
<li>
<a id = "wdpk-topbar-fullwidth"
href = "http://localhost:4000/demos/main-demo/header/full-width.html"
class = "wdpk-dropDown-item">Fullwidth
</a>
</li>
<!-- /Dropdown sub menu items -->
<!-- Dropdown sub menu items -->
<li>
<a id = "wdpk-topbar-fullwidth"
href = "http://localhost:4000/demos/main-demo/header/transparent.html"
class = "wdpk-dropDown-item">Transparent Light
</a>
</li>
<!-- /Dropdown sub menu items -->
<!-- Dropdown sub menu items -->
<li>
<a id = "wdpk-topbar-fullwidth"
href = "http://localhost:4000/demos/main-demo/header/double-decker-transparent-dark.html"
class = "wdpk-dropDown-item">Transparent Dark
</a>
</li>
<!-- /Dropdown sub menu items -->
</ul>
</div>
</li>
<!-- /Dropdown menu items -->
<!-- Dropdown menu items -->
<li class = "wdpk-hasSubMenu wdpk-dropCorrect">
<a id = "wdpk-header" href = "http://localhost:4000#" class = "wdpk-dropDown-item">Header
<i class = "fas fa fa-angle-right wdpk-submenu-caret"></i>
<i class = "fas fa fa-plus wdpk-offcanvas-plus"></i>
</a>
<div class = "wdpk-menu-container">
<ul class = "wdpk-dropDown">
<!-- Dropdown sub menu items -->
<li>
<a id = "wdpk-header-light"
href = "http://localhost:4000/demos/main-demo/header/mega-menu.html"
class = "wdpk-dropDown-item">Light
</a>
</li>
<!-- /Dropdown sub menu items -->
<!-- Dropdown sub menu items -->
<li>
<a id = "wdpk-header-dark"
href = "http://localhost:4000/demos/main-demo/header/double-decker-dark.html"
class = "wdpk-dropDown-item">Dark
</a>
</li>
<!-- /Dropdown sub menu items -->
<!-- Dropdown sub menu items -->
<li>
<a id = "wdpk-header-tranparent"
href = "http://localhost:4000/demos/main-demo/header/transparent.html"
class = "wdpk-dropDown-item">Transparent
</a>
</li>
<!-- /Dropdown sub menu items -->
<!-- Dropdown sub menu items -->
<li>
<a id = "wdpk-header-colored"
href = "http://localhost:4000/demos/main-demo/header/gradient-primary.html"
class = "wdpk-dropDown-item">Gradient
</a>
</li>
<!-- /Dropdown sub menu items -->
<!-- Dropdown sub menu items -->
<li>
<a id = "wdpk-header-fullwidth"
href = "http://localhost:4000/demos/main-demo/header/full-width.html"
class = "wdpk-dropDown-item">Fullwidth
</a>
</li>
<!-- /Dropdown sub menu items -->
<!-- Dropdown sub menu items -->
<li>
<a id = "wdpk-header-minimalistic"
href = "http://localhost:4000/demos/main-demo/header/slim-menu.html"
class = "wdpk-dropDown-item">Minimalistic
</a>
</li>
<!-- /Dropdown sub menu items -->
<!-- Dropdown sub menu items -->
<li>
<a id = "wdpk-header-oulined"
href = "http://localhost:4000/demos/main-demo/header/outlined-light.html"
class = "wdpk-dropDown-item">Outlined Light
</a>
</li>
<!-- /Dropdown sub menu items -->
<!-- Dropdown sub menu items -->
<li>
<a id = "wdpk-header-oulined"
href = "http://localhost:4000/demos/main-demo/header/outlined-dark.html"
class = "wdpk-dropDown-item">Outlined Dark
</a>
</li>
<!-- /Dropdown sub menu items -->
<!-- Dropdown sub menu items -->
<li>
<a id = "wdpk-header-sticky"
href = "http://localhost:4000/demos/main-demo/header/mega-menu.html"
class = "wdpk-dropDown-item">Sticky
</a>
</li>
<!-- /Dropdown sub menu items -->
</ul>
</div>
</li>
<!-- /Dropdown menu items -->
<!-- Dropdown menu items -->
<li class = "wdpk-hasSubMenu wdpk-dropCorrect">
<a id = "wdpk-main-menu" href = "http://localhost:4000#" class = "wdpk-dropDown-item">Main Menu
<i class = "fas fa fa-angle-right wdpk-submenu-caret"></i>
<i class = "fas fa fa-plus wdpk-offcanvas-plus"></i>
</a>
<div class = "wdpk-menu-container">
<ul class = "wdpk-dropDown">
<!-- Dropdown sub menu items -->
<li>
<a id = "wdpk-main-menu-default"
href = "http://localhost:4000/demos/main-demo/header/default-header.html"
class = "wdpk-dropDown-item">Default
</a>
</li>
<!-- /Dropdown sub menu items -->
<!-- Dropdown sub menu items -->
<li>
<a id = "wdpk-main-menu-default"
href = "http://localhost:4000/demos/main-demo/header/mega-menu.html"
class = "wdpk-dropDown-item">Primary and Topbar
</a>
</li>
<!-- /Dropdown sub menu items -->
<!-- Dropdown sub menu items -->
<li>
<a id = "wdpk-main-menu0-double-deck"
href = "http://localhost:4000/demos/main-demo/header/double-decker.html"
class = "wdpk-dropDown-item">Double Deck
</a>
</li>
<!-- /Dropdown sub menu items -->
<!-- Dropdown sub menu items -->
<li>
<a id = "wdpk-main-menu0-double-deck"
href = "http://localhost:4000/demos/main-demo/header/sticky.html"
class = "wdpk-dropDown-item">Bottom Bar Sticky
</a>
</li>
<!-- /Dropdown sub menu items -->
<!-- Dropdown sub menu items -->
<li>
<a id = "wdpk-main-menu-split"
href = "http://localhost:4000/demos/main-demo/header/split-menu.html"
class = "wdpk-dropDown-item">Split
</a>
</li>
<!-- /Dropdown sub menu items -->
<!-- Dropdown sub menu items -->
<li>
<a id = "wdpk-main-menu-searcher"
href = "http://localhost:4000/demos/main-demo/header/searcher.html"
class = "wdpk-dropDown-item">Searcher
</a>
</li>
<!-- /Dropdown sub menu items -->
<!-- Dropdown sub menu items -->
<li>
<a id = "wdpk-main-menu-fullwidth"
href = "http://localhost:4000/demos/main-demo/header/full-width.html"
class = "wdpk-dropDown-item">Fullwidth
</a>
</li>
<!-- /Dropdown sub menu items -->
<!-- Dropdown sub menu items -->
<li>
<a id = "wdpk-main-menu-advertiser"
href = "http://localhost:4000/demos/main-demo/header/advertiser.html"
class = "wdpk-dropDown-item">Advertiser
</a>
</li>
<!-- /Dropdown sub menu items -->
<!-- Dropdown sub menu items -->
<li>
<a id = "wdpk-main-menu-default"
href = "http://localhost:4000/demos/main-demo/header/shopping-cart.html"
class = "wdpk-dropDown-item">Shoppping Cart
</a>
</li>
<!-- /Dropdown sub menu items -->
<!-- Dropdown sub menu items -->
<li>
<a id = "wdpk-main-menu-outlines"
href = "http://localhost:4000/demos/main-demo/header/offcanvas.html"
class = "wdpk-dropDown-item">Offcanvas
</a>
</li>
<!-- /Dropdown sub menu items -->
<!-- Dropdown sub menu items -->
<li>
<a id = "wdpk-main-menu-dots-menu"
href = "http://localhost:4000/demos/main-demo/header/offcanvas-left.html"
class = "wdpk-dropDown-item">Offcanvas Left
</a>
</li>
<!-- /Dropdown sub menu items -->
<!-- Dropdown sub menu items -->
<li>
<a id = "wdpk-main-menu-onepage"
href = "http://localhost:4000/demos/main-demo/header/slim-menu.html"
class = "wdpk-dropDown-item">Slim Menu
</a>
</li>
<!-- /Dropdown sub menu items -->
</ul>
</div>
</li>
<!-- /Dropdown menu items -->
<!-- Dropdown menu items -->
<li class = "wdpk-hasSubMenu wdpk-dropCorrect">
<a id = "menu-hover" href = "http://localhost:4000#" class = "wdpk-dropDown-item">Menu Hover Effects
<i class = "fas fa fa-angle-right wdpk-submenu-caret"></i>
<i class = "fas fa fa-plus wdpk-offcanvas-plus"></i>
</a>
<div class = "wdpk-menu-container">
<ul class = "wdpk-dropDown">
<!-- Dropdown sub menu items -->
<li>
<a id = "menu-hover-bottom-up"
href = "http://localhost:4000/demos/main-demo/header/bottomup-effect.html"
class = "wdpk-dropDown-item">Bottom Up
</a>
</li>
<!-- /Dropdown sub menu items -->
<!-- Dropdown sub menu items -->
<li>
<a id = "menu-hover-top-bottom"
href = "http://localhost:4000/demos/main-demo/header/top-bottom-effect.html"
class = "wdpk-dropDown-item">Top Bottom
</a>
</li>
<!-- /Dropdown sub menu items -->
<!-- Dropdown sub menu items -->
<li>
<a id = "menu-hover-center-grow"
href = "http://localhost:4000/demos/main-demo/header/center-grow.scss"
class = "wdpk-dropDown-item">Center Grow
</a>
</li>
<!-- /Dropdown sub menu items -->
<!-- Dropdown sub menu items -->
<li>
<a id = "menu-hover-fill"
href = "http://localhost:4000/demos/main-demo/header/gradient-topbar.html"
class = "wdpk-dropDown-item">Background
</a>
</li>
<!-- /Dropdown sub menu items -->
</ul>
</div>
</li>
<!-- /Dropdown menu items -->
<!-- Dropdown menu items -->
<li class = "wdpk-hasSubMenu wdpk-dropCorrect">
<a id = "menu-labels" href = "http://localhost:4000#" class = "wdpk-dropDown-item">Menu Labels
<i class = "fas fa fa-angle-right wdpk-submenu-caret"></i>
<i class = "fas fa fa-plus wdpk-offcanvas-plus"></i>
</a>
<div class = "wdpk-menu-container">
<ul class = "wdpk-dropDown">
<!-- Dropdown sub menu items -->
<li>
<a id = "menu-labels-new" href = "http://localhost:4000/subthing1.html"
class = "wdpk-dropDown-item">New
<span class = "badge badge-danger">New</span>
</a>
</li>
<!-- /Dropdown sub menu items -->
<!-- Dropdown sub menu items -->
<li>
<a id = "menu-labels-hot" href = "http://localhost:4000/subthing2.html"
class = "wdpk-dropDown-item">Hot
<span class = "badge badge-danger">Hot</span>
</a>
</li>
<!-- /Dropdown sub menu items -->
<!-- Dropdown sub menu items -->
<li>
<a id = "menu-labels-popular"
href = "http://localhost:4000/subthing2.html"
class = "wdpk-dropDown-item">Popular
<span class = "badge badge-success">Popular</span>
</a>
</li>
<!-- /Dropdown sub menu items -->
<!-- Dropdown sub menu items -->
<li>
<a id = "menu-labels-sale" href = "http://localhost:4000/subthing2.html"
class = "wdpk-dropDown-item">Sale
<span class = "badge badge-warning">Sale</span>
</a>
</li>
<!-- /Dropdown sub menu items -->
<!-- Dropdown sub menu items -->
<li>
<a id = "menu-labels-info" href = "http://localhost:4000/subthing2.html"
class = "wdpk-dropDown-item">Info
<span class = "badge badge-info">Info</span>
</a>
</li>
<!-- /Dropdown sub menu items -->
</ul>
</div>
</li>
<!-- /Dropdown menu items -->
<!-- Dropdown menu items -->
<li class = "wdpk-hasSubMenu wdpk-dropCorrect">
<a id = "menu-page-title" href = "http://localhost:4000#" class = "wdpk-dropDown-item">Page Title
<i class = "fas fa fa-angle-right wdpk-submenu-caret"></i>
<i class = "fas fa fa-plus wdpk-offcanvas-plus"></i>
</a>
<div class = "wdpk-menu-container">
<ul class = "wdpk-dropDown">
<!-- Dropdown sub menu items -->
<li>
<a id = "menu-page-default"
href = "http://localhost:4000/demos/main-demo/layouts/page-title.html"
class = "wdpk-dropDown-item">Image
</a>
</li>
<!-- /Dropdown sub menu items -->
<!-- Dropdown sub menu items -->
<li>
<a id = "menu-page-image-bg"
href = "http://localhost:4000/demos/main-demo/layouts/page-title-parallax.html"
class = "wdpk-dropDown-item">Parallax
</a>
</li>
<!-- /Dropdown sub menu items -->
<!-- Dropdown sub menu items -->
<li>
<a id = "menu-page-video"
href = "http://localhost:4000/demos/main-demo/layouts/page-title.html"
class = "wdpk-dropDown-item">Colored
</a>
</li>
<!-- /Dropdown sub menu items -->
<!-- Dropdown sub menu items -->
<li>
<a id = "menu-page-title-pattern"
href = "http://localhost:4000/demos/main-demo/layouts/page-title-gradient.html"
class = "wdpk-dropDown-item">Gradient
</a>
</li>
<!-- /Dropdown sub menu items -->
<!-- Dropdown sub menu items -->
<li>
<a id = "menu-page-title-colored"
href = "http://localhost:4000/demos/main-demo/layouts/page-title-slideshow.html"
class = "wdpk-dropDown-item">Slideshow
</a>
</li>
<!-- /Dropdown sub menu items -->
<!-- Dropdown sub menu items -->
<li>
<a id = "menu-page-title-parallax"
href = "http://localhost:4000/demos/main-demo/layouts/page-title-video.html"
class = "wdpk-dropDown-item">Video
</a>
</li>
<!-- /Dropdown sub menu items -->
</ul>
</div>
</li>
<!-- /Dropdown menu items -->
<!-- Dropdown menu items -->
<li class = "wdpk-hasSubMenu wdpk-dropCorrect">
<a id = "wdpk-sidebars" href = "http://localhost:4000#" class = "wdpk-dropDown-item">Sidebars
<i class = "fas fa fa-angle-right wdpk-submenu-caret"></i>
<i class = "fas fa fa-plus wdpk-offcanvas-plus"></i>
</a>
<div class = "wdpk-menu-container">
<ul class = "wdpk-dropDown">
<!-- Dropdown sub menu items -->
<li>
<a id = "wdpk-sidebars-clean"
href = "http://localhost:4000/demos/main-demo/layouts/sidebar-clean.html"
class = "wdpk-dropDown-item">Clean
</a>
</li>
<!-- /Dropdown sub menu items -->
<!-- Dropdown sub menu items -->
<li>
<a id = "wdpk-sidebars-section"
href = "http://localhost:4000/demos/main-demo/layouts/sidebar.html"
class = "wdpk-dropDown-item">Sectioned
</a>
</li>
<!-- /Dropdown sub menu items -->
<!-- Dropdown sub menu items -->
<li>
<a id = "wdpk-sidebars-oulined"
href = "http://localhost:4000/demos/main-demo/layouts/sidebar-outlined.html"
class = "wdpk-dropDown-item">Outlined
</a>
</li>
<!-- /Dropdown sub menu items -->
</ul>
</div>
</li>
<!-- /Dropdown menu items -->
<!-- Dropdown menu items -->
<li class = "wdpk-hasSubMenu wdpk-dropCorrect">
<a id = "wdpk-footers" href = "http://localhost:4000#" class = "wdpk-dropDown-item">Footers
<i class = "fas fa fa-angle-right wdpk-submenu-caret"></i>
<i class = "fas fa fa-plus wdpk-offcanvas-plus"></i>
</a>
<div class = "wdpk-menu-container">
<ul class = "wdpk-dropDown">
<!-- Dropdown sub menu items -->
<li>
<a id = "wdpk-footers-1"
href = "http://localhost:4000/demos/main-demo/layouts/footer.html"
class = "wdpk-dropDown-item">Equal Columns
</a>
</li>
<!-- /Dropdown sub menu items -->
<!-- Dropdown sub menu items -->
<li>
<a id = "wdpk-footers-2"
href = "http://localhost:4000/demos/main-demo/layouts/footer-wider.html"
class = "wdpk-dropDown-item">Wider Column
</a>
</li>
<!-- /Dropdown sub menu items -->
<!-- Dropdown sub menu items -->
<li>
<a id = "wdpk-footers-3"
href = "http://localhost:4000/demos/main-demo/layouts/footer-light.html"
class = "wdpk-dropDown-item">Light Version
</a>
</li>
<!-- /Dropdown sub menu items -->
<!-- Dropdown sub menu items -->
<li>
<a id = "wdpk-footers-3"
href = "http://localhost:4000/demos/main-demo/layouts/footer-full-width.html"
class = "wdpk-dropDown-item">Full Width
</a>
</li>
<!-- /Dropdown sub menu items -->
<!-- Dropdown sub menu items -->
<li>
<a id = "wdpk-footers-3"
href = "http://localhost:4000/demos/main-demo/layouts/footer-image.html"
class = "wdpk-dropDown-item">Image Background
</a>
</li>
<!-- /Dropdown sub menu items -->
<!-- Dropdown sub menu items -->
<li>
<a id = "wdpk-footers-3"
href = "http://localhost:4000/demos/main-demo/layouts/footer-gradient.html"
class = "wdpk-dropDown-item">Gradient Background
</a>
</li>
<!-- /Dropdown sub menu items -->
</ul>
</div>
</li>
<!-- /Dropdown menu items -->
</ul>
</div>
<!-- Primary menu items -->
</li><li class = "wdpk-dropCorrect wdpk-has-mega-menu">
<a id = "wdpk-shortcodes" class = "wdpk-hasDropdown wdpk-menu-hover" href = "#">
Shortcodes <i class = "fa fa-angle-down wdpkDropdownCaret"></i>
<i class = "fas fa fa-plus wdpk-offcanvas-plus"></i>
</a>
<!-- Container For Mega Menu -->
<div class = "wdpk-menu-container wdpk-mega-menu">
<div class = "container wdpk-mega-menu-wrapper">
<div class = "row">
<!-- Section for Mega Menu -->
<div class = "col-lg-2 col-md-12 wdpk-mega-menu-section">
<div class = "wdpk-mega-title"></div>
<ul class = "wdpk-dropDown">
<!-- Mega Menu Items -->
<li>
<a id = ""
href = "http://localhost:4000/demos/main-demo/shortcodes/accordion-light.html"
class = "wdpk-dropDown-item">
<i class = "fas fa fa-bars"></i>
Accordions
</a>
</li>
<!-- /Mega Menu Items -->
<!-- Mega Menu Items -->
<li>
<a id = ""
href = "http://localhost:4000/demos/main-demo/shortcodes/alerts-light.html"
class = "wdpk-dropDown-item">
<i class = "fas fa fa-exclamation-triangle"></i>
Alerts
</a>
</li>
<!-- /Mega Menu Items -->
<!-- Mega Menu Items -->
<li>
<a id = "" href = "http://localhost:4000/demos/main-demo/shortcodes/animations.html"
class = "wdpk-dropDown-item">
<i class = "fas fa fa-expand"></i>
Animations
</a>
</li>
<!-- /Mega Menu Items -->
<!-- Mega Menu Items -->
<li>
<a id = ""
href = "http://localhost:4000/demos/main-demo/shortcodes/audio-player.html"
class = "wdpk-dropDown-item">
<i class = "fas fa fa-play-circle"></i>
Audio
<span class = "badge badge-danger">Unique</span>
</a>
</li>
<!-- /Mega Menu Items -->
<!-- Mega Menu Items -->
<li>
<a id = ""
href = "http://localhost:4000/demos/main-demo/shortcodes/blockquotes.html"
class = "wdpk-dropDown-item">
<i class = "fas fa fa-quote-left"></i>
Blockquotes
</a>
</li>
<!-- /Mega Menu Items -->
<!-- Mega Menu Items -->
<li>
<a id = ""
href = "http://localhost:4000/demos/main-demo/shortcodes/breadcrumbs.html"
class = "wdpk-dropDown-item">
<i class = "fas fa fa-ellipsis-h"></i>
Breadcrumbs
</a>
</li>
<!-- /Mega Menu Items -->
<!-- Mega Menu Items -->
<li>
<a id = "" href = "http://localhost:4000/demos/main-demo/shortcodes/buttons.html"
class = "wdpk-dropDown-item">
<i class = "fas fa fa-external-link"></i>
Buttons
</a>
</li>
<!-- /Mega Menu Items -->
</ul>
</div>
<!-- /Section for Mega Menu -->
<!-- Section for Mega Menu -->
<div class = "col-lg-2 col-md-12 wdpk-mega-menu-section">
<div class = "wdpk-mega-title"></div>
<ul class = "wdpk-dropDown">
<!-- Mega Menu Items -->
<li>
<a id = "" href = "http://localhost:4000/demos/main-demo/shortcodes/cards.html"
class = "wdpk-dropDown-item">
<i class = "fas fa fa-address-card"></i>
Cards
<span class = "badge badge-warning">Extensive</span>
</a>
</li>
<!-- /Mega Menu Items -->
<!-- Mega Menu Items -->
<li>
<a id = "" href = "http://localhost:4000/demos/main-demo/shortcodes/clients.html"
class = "wdpk-dropDown-item">
<i class = "fas fa fa-user"></i>
Clients
</a>
</li>
<!-- /Mega Menu Items -->
<!-- Mega Menu Items -->
<li>
<a id = "" href = "http://localhost:4000/demos/main-demo/shortcodes/carousel.html"
class = "wdpk-dropDown-item">
<i class = "fas fa fa-clone"></i>
Carousel
</a>
</li>
<!-- /Mega Menu Items -->
<!-- Mega Menu Items -->
<li>
<a id = "" href = "http://localhost:4000/demos/main-demo/shortcodes/code.html"
class = "wdpk-dropDown-item">
<i class = "fas fa fa-code"></i>
Code
</a>
</li>
<!-- /Mega Menu Items -->
<!-- Mega Menu Items -->
<li>
<a id = "" href = "http://localhost:4000/demos/main-demo/shortcodes/timer.html"
class = "wdpk-dropDown-item">
<i class = "fas fa fa-hourglass"></i>
Timers
<span class = "badge badge-success">Useful</span>
</a>
</li>
<!-- /Mega Menu Items -->
<!-- Mega Menu Items -->
<li>
<a id = "" href = "http://localhost:4000/demos/main-demo/shortcodes/counter.html"
class = "wdpk-dropDown-item">
<i class = "fas fa fa-list-alt"></i>
Counters
</a>
</li>
<!-- /Mega Menu Items -->
<!-- Mega Menu Items -->
<li>
<a id = "" href = "http://localhost:4000/demos/main-demo/shortcodes/circles.html"
class = "wdpk-dropDown-item">
<i class = "fas fa fa-adjust"></i>
Cicle Counters
</a>
</li>
<!-- /Mega Menu Items -->
</ul>
</div>
<!-- /Section for Mega Menu -->
<!-- Section for Mega Menu -->
<div class = "col-lg-2 col-md-12 wdpk-mega-menu-section">
<div class = "wdpk-mega-title"></div>
<ul class = "wdpk-dropDown">
<!-- Mega Menu Items -->
<li>
<a id = "" href = "http://localhost:4000/demos/main-demo/shortcodes/comments.html"
class = "wdpk-dropDown-item">
<i class = "fas fa fa-comments"></i>
Comments
</a>
</li>
<!-- /Mega Menu Items -->
<!-- Mega Menu Items -->
<li>
<a id = "" href = "http://localhost:4000/demos/main-demo/shortcodes/dropdowns.html"
class = "wdpk-dropDown-item">
<i class = "fas fa fa-th"></i>
Dropdown
</a>
</li>
<!-- /Mega Menu Items -->
<!-- Mega Menu Items -->
<li>
<a id = "" href = "http://localhost:4000/demos/main-demo/shortcodes/dropcaps.html"
class = "wdpk-dropDown-item">
<i class = "fas fa fa-font"></i>
Drop Caps
</a>
</li>
<!-- /Mega Menu Items -->
<!-- Mega Menu Items -->
<li>
<a id = "" href = "http://localhost:4000/demos/main-demo/shortcodes/forms.html"
class = "wdpk-dropDown-item">
<i class = "fas fa fa-check-square"></i>
Forms
<span class = "badge badge-warning">Extensive</span>
</a>
</li>
<!-- /Mega Menu Items -->
<!-- Mega Menu Items -->
<li>
<a id = "" href = "http://localhost:4000/demos/main-demo/shortcodes/flipbox.html"
class = "wdpk-dropDown-item">
<i class = "fas fa fa-window-restore"></i>
Flip Boxes
</a>
</li>
<!-- /Mega Menu Items -->
<!-- Mega Menu Items -->
<li>
<a id = "" href = "http://localhost:4000/demos/main-demo/shortcodes/headings.html"
class = "wdpk-dropDown-item">
<i class = "fas fa fa-window-restore"></i>
Headings
</a>
</li>
<!-- /Mega Menu Items -->
</ul>
</div>
<!-- /Section for Mega Menu -->
<!-- Section for Mega Menu -->
<div class = "col-lg-2 col-md-12 wdpk-mega-menu-section">
<div class = "wdpk-mega-title"></div>
<ul class = "wdpk-dropDown">
<!-- Mega Menu Items -->
<li>
<a id = "" href = "http://localhost:4000/demos/main-demo/shortcodes/infobox.html"
class = "wdpk-dropDown-item">
<i class = "fas fa fa-info"></i>
Infobox
</a>
</li>
<!-- /Mega Menu Items -->
<!-- Mega Menu Items -->
<li>
<a id = "" href = "http://localhost:4000/demos/main-demo/shortcodes/jumbotron.html"
class = "wdpk-dropDown-item">
<i class = "fas fa fa-th-large"></i>
Jumbotron
</a>
</li>
<!-- /Mega Menu Items -->
<!-- Mega Menu Items -->
<li>
<a id = ""
href = "http://localhost:4000/demos/main-demo/shortcodes/image-hovers.html"
class = "wdpk-dropDown-item">
<i class = "fas fa fa-magic"></i>
Hovers
<span class = "badge badge-danger">Unique</span>
</a>
</li>
<!-- /Mega Menu Items -->
<!-- Mega Menu Items -->
<li>
<a id = "" href = "http://localhost:4000/demos/main-demo/shortcodes/lightbox.html"
class = "wdpk-dropDown-item">
<i class = "fas fa fa-window-maximize"></i>
Lightbox
</a>
</li>
<!-- /Mega Menu Items -->
<!-- Mega Menu Items -->
<li>
<a id = ""
href = "http://localhost:4000/demos/main-demo/shortcodes/google-maps.html"
class = "wdpk-dropDown-item">
<i class = "fas fa fa-map-marker"></i>
Google Maps
</a>
</li>
<!-- /Mega Menu Items -->
<!-- Mega Menu Items -->
<li>
<a id = "" href = "http://localhost:4000/demos/main-demo/shortcodes/pagination.html"
class = "wdpk-dropDown-item">
<i class = "fas fa fa-angle-double-right"></i>
Pagination
</a>
</li>
<!-- /Mega Menu Items -->
<!-- Mega Menu Items -->
<li>
<a id = "" href = "http://localhost:4000/demos/main-demo/shortcodes/parallax.html"
class = "wdpk-dropDown-item">
<i class = "fas fa fa-compress"></i>
Parallax
<span class = "badge badge-danger">Unique</span>
</a>
</li>
<!-- /Mega Menu Items -->
</ul>
</div>
<!-- /Section for Mega Menu -->
<!-- Section for Mega Menu -->
<div class = "col-lg-2 col-md-12 wdpk-mega-menu-section">
<div class = "wdpk-mega-title"></div>
<ul class = "wdpk-dropDown">
<!-- Mega Menu Items -->
<li>
<a id = ""
href = "http://localhost:4000/demos/main-demo/shortcodes/progress-bars.html"
class = "wdpk-dropDown-item">
<i class = "fas fa fa-align-left"></i>
Progress Bars
</a>
</li>
<!-- /Mega Menu Items -->
<!-- Mega Menu Items -->
<li>
<a id = ""
href = "http://localhost:4000/demos/main-demo/shortcodes/page-transitions.html"
class = "wdpk-dropDown-item">
<i class = "fas fa fa-barcode"></i>
Transitions
<span class = "badge badge-success"><i class = "fa fa-star"
aria-hidden = "true"></i></span>
</a>
</li>
<!-- /Mega Menu Items -->
<!-- Mega Menu Items -->
<li>
<a id = ""
href = "http://localhost:4000/demos/main-demo/shortcodes/section-separator.html"
class = "wdpk-dropDown-item">
<i class = "fas fa fa-map-signs"></i>
Sections
<span class = "badge badge-danger">Unique</span>
</a>
</li>
<!-- /Mega Menu Items -->
<!-- Mega Menu Items -->
<li>
<a id = ""
href = "http://localhost:4000/demos/main-demo/shortcodes/animate-scroll.html"
class = "wdpk-dropDown-item">
<i class = "fas fa fa-mouse-pointer"></i>
Scroll Animate
</a>
</li>
<!-- /Mega Menu Items -->
<!-- Mega Menu Items -->
<li>
<a id = ""
href = "http://localhost:4000/demos/main-demo/shortcodes/social-sharing.html"
class = "wdpk-dropDown-item">
<i class = "fas fa fa-share-square"></i>
Social Sharing
</a>
</li>
<!-- /Mega Menu Items -->
<!-- Mega Menu Items -->
<li>
<a id = ""
href = "http://localhost:4000/demos/main-demo/shortcodes/smooth-scroll.html"
class = "wdpk-dropDown-item">
<i class = "fas fa fa-arrow-down"></i>
Smooth Scroll
</a>
</li>
<!-- /Mega Menu Items -->
<!-- Mega Menu Items -->
<li>
<a id = ""
href = "http://localhost:4000/demos/main-demo/shortcodes/scroll-to-top.html"
class = "wdpk-dropDown-item">
<i class = "fas fa fa-arrow-up"></i>
Scroll Top
</a>
</li>
<!-- /Mega Menu Items -->
</ul>
</div>
<!-- /Section for Mega Menu -->
<!-- Section for Mega Menu -->
<div class = "col-lg-2 col-md-12 wdpk-mega-menu-section">
<div class = "wdpk-mega-title"></div>
<ul class = "wdpk-dropDown">
<!-- Mega Menu Items -->
<li>
<a id = "" href = "http://localhost:4000/demos/main-demo/shortcodes/tables.html"
class = "wdpk-dropDown-item">
<i class = "fas fa fa-table"></i>
Tables
</a>
</li>
<!-- /Mega Menu Items -->
<!-- Mega Menu Items -->
<li>
<a id = ""
href = "http://localhost:4000/demos/main-demo/shortcodes/typing-text.html"
class = "wdpk-dropDown-item">
<i class = "fas fa fa-text-width"></i>
Typing Text
</a>
</li>
<!-- /Mega Menu Items -->
<!-- Mega Menu Items -->
<li>
<a id = ""
href = "http://localhost:4000/demos/main-demo/shortcodes/video-player.html"
class = "wdpk-dropDown-item">
<i class = "fas fa fa-play"></i>
Video Player
</a>
</li>
<!-- /Mega Menu Items -->
<!-- Mega Menu Items -->
<li>
<a id = "" href = "http://localhost:4000/demos/main-demo/shortcodes/widgets.html"
class = "wdpk-dropDown-item">
<i class = "fas fa fa-object-ungroup"></i>
Widgets
</a>
</li>
<!-- /Mega Menu Items -->
</ul>
</div>
<!-- /Section for Mega Menu -->
</div>
</div>
</div>
<!-- /Container For Mega Menu -->
</li>
<!-- Primary menu items -->
<li class = "wdpk-dropCorrect wdpk-has-mega-menu">
<a id = "wdpk-blogs" class = "wdpk-hasDropdown wdpk-menu-hover" href = "#">
Blog <i class = "fa fa-angle-down wdpkDropdownCaret"></i>
<i class = "fas fa fa-plus wdpk-offcanvas-plus"></i>
</a>
<!-- Container For Mega Menu -->
<div class = "wdpk-menu-container wdpk-mega-menu">
<div class = "container wdpk-mega-menu-wrapper">
<div class = "row">
<!-- Section for Mega Menu -->
<div class = "col-lg-3 col-md-12 wdpk-mega-menu-section">
<div class = "wdpk-mega-title">Masonry</div>
<ul class = "wdpk-dropDown">
<!-- Mega Menu Items -->
<li>
<a id = ""
href = "http://localhost:4000/demos/main-demo/blog/blog-masonry-2col.html"
class = "wdpk-dropDown-item">
Two Columns
</a>
</li>
<!-- /Mega Menu Items -->
<!-- Mega Menu Items -->
<li>
<a id = ""
href = "http://localhost:4000/demos/main-demo/blog/blog-masonry-3col.html"
class = "wdpk-dropDown-item">
Three Columns
</a>
</li>
<!-- /Mega Menu Items -->
<!-- Mega Menu Items -->
<li>
<a id = ""
href = "http://localhost:4000/demos/main-demo/blog/blog-masonry-4col.html"
class = "wdpk-dropDown-item">
Four Columns
</a>
</li>
<!-- /Mega Menu Items -->
<!-- Mega Menu Items -->
<li>
<a id = ""
href = "http://localhost:4000/demos/main-demo/blog/blog-masonry-4col.html"
class = "wdpk-dropDown-item">
With Shadow
</a>
</li>
<!-- /Mega Menu Items -->
<!-- Mega Menu Items -->
<li>
<a id = ""
href = "http://localhost:4000/demos/main-demo/blog/blog-masonry-colored.html"
class = "wdpk-dropDown-item">
Colored
</a>
</li>
<!-- /Mega Menu Items -->
<!-- Mega Menu Items -->
<li>
<a id = ""
href = "http://localhost:4000/demos/main-demo/blog/blog-masonry-2col.html"
class = "wdpk-dropDown-item">
Right Sidebar
</a>
</li>
<!-- /Mega Menu Items -->
<!-- Mega Menu Items -->
<li>
<a id = ""
href = "http://localhost:4000/demos/main-demo/blog/blog-masonry-leftbar.html"
class = "wdpk-dropDown-item">
Left Sidebar
</a>
</li>
<!-- /Mega Menu Items -->
<!-- Mega Menu Items -->
<li>
<a id = ""
href = "http://localhost:4000/demos/main-demo/blog/blog-masonry-4col.html"
class = "wdpk-dropDown-item">
Full Width
</a>
</li>
<!-- /Mega Menu Items -->
</ul>
</div>
<!-- /Section for Mega Menu -->
<!-- Section for Mega Menu -->
<div class = "col-lg-3 col-md-12 wdpk-mega-menu-section">
<div class = "wdpk-mega-title">Grid</div>
<ul class = "wdpk-dropDown">
<!-- Mega Menu Items -->
<li>
<a id = "" href = "http://localhost:4000/demos/main-demo/blog/blog-grid-2col.html"
class = "wdpk-dropDown-item">
Two Columns
</a>
</li>
<!-- /Mega Menu Items -->
<!-- Mega Menu Items -->
<li>
<a id = "" href = "http://localhost:4000/demos/main-demo/blog/blog-grid-3col.html"
class = "wdpk-dropDown-item">
Three Columns
</a>
</li>
<!-- /Mega Menu Items -->
<!-- Mega Menu Items -->
<li>
<a id = "" href = "http://localhost:4000/demos/main-demo/blog/blog-grid-4col.html"
class = "wdpk-dropDown-item">
Four Columns
</a>
</li>
<!-- /Mega Menu Items -->
<!-- Mega Menu Items -->
<li>
<a id = "" href = "http://localhost:4000/demos/main-demo/blog/blog-grid-4col.html"
class = "wdpk-dropDown-item">
With Shadow
</a>
</li>
<!-- /Mega Menu Items -->
<!-- Mega Menu Items -->
<li>
<a id = ""
href = "http://localhost:4000/demos/main-demo/blog/blog-grid-colored.html"
class = "wdpk-dropDown-item">
Colored
</a>
</li>
<!-- /Mega Menu Items -->
<!-- Mega Menu Items -->
<li>
<a id = "" href = "http://localhost:4000/demos/main-demo/blog/blog-grid-2col.html"
class = "wdpk-dropDown-item">
Right Sidebar
</a>
</li>
<!-- /Mega Menu Items -->
<!-- Mega Menu Items -->
<li>
<a id = ""
href = "http://localhost:4000/demos/main-demo/blog/blog-grid-leftbar.html"
class = "wdpk-dropDown-item">
Left Sidebar
</a>
</li>
<!-- /Mega Menu Items -->
<!-- Mega Menu Items -->
<li>
<a id = "" href = "http://localhost:4000/demos/main-demo/blog/blog-grid-4col.html"
class = "wdpk-dropDown-item">
Full Width
</a>
</li>
<!-- /Mega Menu Items -->
</ul>
</div>
<!-- /Section for Mega Menu -->
<!-- Section for Mega Menu -->
<div class = "col-lg-3 col-md-12 wdpk-mega-menu-section">
<div class = "wdpk-mega-title">Classic</div>
<ul class = "wdpk-dropDown">
<!-- Mega Menu Items -->
<li>
<a id = ""
href = "http://localhost:4000/demos/main-demo/blog/blog-classic-rightbar.html"
class = "wdpk-dropDown-item">
Right Sidebar
</a>
</li>
<!-- /Mega Menu Items -->
<!-- Mega Menu Items -->
<li>
<a id = ""
href = "http://localhost:4000/demos/main-demo/blog/blog-classic-leftbar.html"
class = "wdpk-dropDown-item">
Left Sidebar
</a>
</li>
<!-- /Mega Menu Items -->
<!-- Mega Menu Items -->
<li>
<a id = ""
href = "http://localhost:4000/demos/main-demo/blog/blog-classic-colored.html"
class = "wdpk-dropDown-item">
Backgound Color
</a>
</li>
<!-- /Mega Menu Items -->
<!-- Mega Menu Items -->
<li>
<a id = ""
href = "http://localhost:4000/demos/main-demo/blog/blog-classic-rightbar.html"
class = "wdpk-dropDown-item">
Outline
</a>
</li>
<!-- /Mega Menu Items -->
<!-- Mega Menu Items -->
<li>
<a id = ""
href = "http://localhost:4000/demos/main-demo/blog/blog-classic-minimal.html"
class = "wdpk-dropDown-item">
Minimal
</a>
</li>
<!-- /Mega Menu Items -->
<!-- Mega Menu Items -->
<li>
<a id = ""
href = "http://localhost:4000/demos/main-demo/blog/blog-classic-shadow.html"
class = "wdpk-dropDown-item">
Shadow
</a>
</li>
<!-- /Mega Menu Items -->
</ul>
</div>
<!-- /Section for Mega Menu -->
<!-- Section for Mega Menu -->
<div class = "col-lg-3 col-md-12 wdpk-mega-menu-section">
<div class = "wdpk-mega-title">Single Post</div>
<ul class = "wdpk-dropDown">
<!-- Mega Menu Items -->
<li>
<a id = "" href = "http://localhost:4000/thing2.html" class = "wdpk-dropDown-item">
Default
</a>
</li>
<!-- /Mega Menu Items -->
<!-- Mega Menu Items -->
<li>
<a id = "" href = "http://localhost:4000/thing2.html" class = "wdpk-dropDown-item">
Slider
</a>
</li>
<!-- /Mega Menu Items -->
<!-- Mega Menu Items -->
<li>
<a id = ""
href = "http://localhost:4000/demos/main-demo/shortcodes/video-player.html"
class = "wdpk-dropDown-item">
Video
</a>
</li>
<!-- /Mega Menu Items -->
<!-- Mega Menu Items -->
<li>
<a id = "" href = "http://localhost:4000/thing2.html" class = "wdpk-dropDown-item">
Audio
</a>
</li>
<!-- /Mega Menu Items -->
<!-- Mega Menu Items -->
<li>
<a id = "" href = "http://localhost:4000/thing1.html" class = "wdpk-dropDown-item">
With Sidebar
</a>
</li>
<!-- /Mega Menu Items -->
<!-- Mega Menu Items -->
<li>
<a id = "" href = "http://localhost:4000/thing2.html" class = "wdpk-dropDown-item">
Dark Mode
</a>
</li>
<!-- /Mega Menu Items -->
<!-- Mega Menu Items -->
<li>
<a id = "" href = "http://localhost:4000/thing2.html" class = "wdpk-dropDown-item">
Center Aligned
</a>
</li>
<!-- /Mega Menu Items -->
</ul>
</div>
<!-- /Section for Mega Menu -->
</div>
</div>
</div>
<!-- /Container For Mega Menu -->
</li>
<!-- Primary menu items -->
<li class = "wdpk-dropCorrect wdpk-has-mega-menu">
<a id = "wdpk-pages" class = "wdpk-hasDropdown wdpk-menu-hover" href = "#">
Pages <i class = "fa fa-angle-down wdpkDropdownCaret"></i>
<i class = "fas fa fa-plus wdpk-offcanvas-plus"></i>
</a>
<!-- Container For Mega Menu -->
<div class = "wdpk-menu-container wdpk-mega-menu">
<div class = "container wdpk-mega-menu-wrapper">
<div class = "row">
<!-- Section for Mega Menu -->
<div class = "col-lg-3 col-md-12 wdpk-mega-menu-section">
<div class = "wdpk-mega-title">General</div>
<ul class = "wdpk-dropDown">
<!-- Mega Menu Items -->
<li>
<a id = "" href = "http://localhost:4000/thing1.html" class = "wdpk-dropDown-item">
About Us
</a>
</li>
<!-- /Mega Menu Items -->
<!-- Mega Menu Items -->
<li>
<a id = "" href = "http://localhost:4000/thing2.html" class = "wdpk-dropDown-item">
About Me
</a>
</li>
<!-- /Mega Menu Items -->
<!-- Mega Menu Items -->
<li>
<a id = "" href = "http://localhost:4000/thing2.html" class = "wdpk-dropDown-item">
Contact Us
</a>
</li>
<!-- /Mega Menu Items -->
<!-- Mega Menu Items -->
<li>
<a id = "" href = "http://localhost:4000/thing2.html" class = "wdpk-dropDown-item">
Our Services
</a>
</li>
<!-- /Mega Menu Items -->
<!-- Mega Menu Items -->
<li>
<a id = "" href = "http://localhost:4000/thing2.html" class = "wdpk-dropDown-item">
Our Clients
</a>
</li>
<!-- /Mega Menu Items -->
</ul>
</div>
<!-- /Section for Mega Menu -->
<!-- Section for Mega Menu -->
<div class = "col-lg-3 col-md-12 wdpk-mega-menu-section">
<div class = "wdpk-mega-title">Gallery</div>
<ul class = "wdpk-dropDown">
<!-- Mega Menu Items -->
<li>
<a id = "" href = "http://localhost:4000/thing2.html" class = "wdpk-dropDown-item">
Gallery 2 Column
</a>
</li>
<!-- /Mega Menu Items -->
<!-- Mega Menu Items -->
<li>
<a id = "" href = "http://localhost:4000/thing2.html" class = "wdpk-dropDown-item">
Gallery 3 Column
</a>
</li>
<!-- /Mega Menu Items -->
<!-- Mega Menu Items -->
<li>
<a id = "" href = "http://localhost:4000/thing2.html" class = "wdpk-dropDown-item">
Gallery 4 Column
</a>
</li>
<!-- /Mega Menu Items -->
<!-- Mega Menu Items -->
<li>
<a id = "" href = "http://localhost:4000/thing2.html" class = "wdpk-dropDown-item">
Gallery 5 Column
</a>
</li>
<!-- /Mega Menu Items -->
<!-- Mega Menu Items -->
<li>
<a id = "" href = "http://localhost:4000/thing1.html" class = "wdpk-dropDown-item">
Gallery 6 Column
</a>
</li>
<!-- /Mega Menu Items -->
</ul>
</div>
<!-- /Section for Mega Menu -->
<!-- Section for Mega Menu -->
<div class = "col-lg-3 col-md-12 wdpk-mega-menu-section">
<div class = "wdpk-mega-title">ECommerce</div>
<ul class = "wdpk-dropDown">
<!-- Mega Menu Items -->
<li>
<a id = "" href = "http://localhost:4000/thing1.html" class = "wdpk-dropDown-item">
Shop 2 Columns
<span class = "badge badge-secondary">Coming Soon</span>
</a>
</li>
<!-- /Mega Menu Items -->
<!-- Mega Menu Items -->
<li>
<a id = "" href = "http://localhost:4000/thing2.html" class = "wdpk-dropDown-item">
Shop 3 Columns
<span class = "badge badge-secondary">Coming Soon</span>
</a>
</li>
<!-- /Mega Menu Items -->
<!-- Mega Menu Items -->
<li>
<a id = "" href = "http://localhost:4000/thing2.html" class = "wdpk-dropDown-item">
Shop 4 Columns
<span class = "badge badge-secondary">Coming Soon</span>
</a>
</li>
<!-- /Mega Menu Items -->
<!-- Mega Menu Items -->
<li>
<a id = "" href = "http://localhost:4000/thing2.html" class = "wdpk-dropDown-item">
Shop 5 Columns
<span class = "badge badge-secondary">Coming Soon</span>
</a>
</li>
<!-- /Mega Menu Items -->
<!-- Mega Menu Items -->
<li>
<a id = "" href = "http://localhost:4000/thing2.html" class = "wdpk-dropDown-item">
Without Sidebar
<span class = "badge badge-secondary">Coming Soon</span>
</a>
</li>
<!-- /Mega Menu Items -->
</ul>
</div>
<!-- /Section for Mega Menu -->
<!-- Section for Mega Menu -->
<div class = "col-lg-3 col-md-12 wdpk-mega-menu-section">
<div class = "wdpk-mega-title">Ultility</div>
<ul class = "wdpk-dropDown">
<!-- Mega Menu Items -->
<li>
<a id = "" href = "http://localhost:4000/thing2.html" class = "wdpk-dropDown-item">
User Login
</a>
</li>
<!-- /Mega Menu Items -->
<!-- Mega Menu Items -->
<li>
<a id = "" href = "http://localhost:4000/thing2.html" class = "wdpk-dropDown-item">
User Registration
</a>
</li>
<!-- /Mega Menu Items -->
<!-- Mega Menu Items -->
<li>
<a id = "" href = "http://localhost:4000/thing2.html" class = "wdpk-dropDown-item">
Password Recovery
</a>
</li>
<!-- /Mega Menu Items -->
<!-- Mega Menu Items -->
<li>
<a id = "" href = "http://localhost:4000/thing2.html" class = "wdpk-dropDown-item">
404 Page
</a>
</li>
<!-- /Mega Menu Items -->
<!-- Mega Menu Items -->
<li>
<a id = "" href = "http://localhost:4000/thing2.html" class = "wdpk-dropDown-item">
500 Error
</a>
</li>
<!-- /Mega Menu Items -->
<!-- Mega Menu Items -->
<li>
<a id = "" href = "http://localhost:4000/thing2.html" class = "wdpk-dropDown-item">
Maintenance Mode
</a>
</li>
<!-- /Mega Menu Items -->
</ul>
</div>
<!-- /Section for Mega Menu -->
</div>
</div>
</div>
<!-- /Container For Mega Menu -->
</li>
<li><a href = "" class = "btn-primary btn-sm text-white">Buy Now!</a></li>
</ul>
<!-- / Parent Items ul -->
</nav>
<!-- / Navbar For Header -->
</div>
<!-- / Navigation Menu Area For navbar -->
<!-- Social Media Buttons For OffCanvas Menu -->
<div class = "col-12 order-4 wdpk-social-offcanvas">
<!-- Social Item of Top Bar -->
<a href = "#" class = "wdpk-facebook">
<span>
<i class = "fab fa fa-facebook"></i>
</span>
</a>
<!-- /Social Item of Top Bar -->
<!-- Social Item of Top Bar -->
<a href = "#" class = "wdpk-twitter">
<span>
<i class = "fab fa fa-twitter"></i>
</span>
</a>
<!-- /Social Item of Top Bar -->
<!-- Social Item of Top Bar -->
<a href = "#" class = "wdpk-google">
<span>
<i class = "fab fa fa-google-plus"></i>
</span>
</a>
<!-- /Social Item of Top Bar -->
<!-- Social Item of Top Bar -->
<a href = "#" class = "wdpk-linkedin">
<span>
<i class = "fab fa fa-linkedin"></i>
</span>
</a>
<!-- /Social Item of Top Bar -->
</div>
<!-- /Social Media Buttons For OffCanvas Menu -->
</div>
<!-- /Container For Header Contents -->
</div>
<!-- /Row For Header Contents -->
</div>
<!-- / Bottom Bar -->
</div>
<!-- / Row For Main Navigation -->
</div>
$wdpk-primary-color: #0056c6 !default;
$wdpk-gray-200: #e9ecef !default;
$wdpk-gray-300: #dee2e6 !default;
$wdpk-gray-400: #ced4da !default;
$wdpk-gray-500: #adb5bd !default;
$wdpk-gray-600: #6c757d !default;
$wdpk-gray-700: #495057 !default;
$wdpk-primary-menu-border-map: (
borderTop: true,
borderTopColor: $wdpk-gray-700,
borderTopWidth: 1px,
borderTopStyle: solid,
borderRight: false,
borderRightColor: #dddddd,
borderRightWidth: 1px,
borderRightStyle: solid,
borderBottom: true,
borderBottomColor: $wdpk-gray-700,
borderBottomWidth: 1px,
borderBottomStyle: solid,
borderLeft: false,
borderLeftColor: #dddddd,
borderLeftWidth: 1px,
borderLeftStyle: solid
) !default;
$wdpk-bottom-bar-menu-border-map: (
borderTop: false,
borderTopColor: $wdpk-gray-700,
borderTopWidth: 1px,
borderTopStyle: solid,
borderRight: false,
borderRightColor: #dddddd,
borderRightWidth: 5px,
borderRightStyle: solid,
borderBottom: true,
borderBottomColor: $wdpk-gray-700,
borderBottomWidth: 1px,
borderBottomStyle: solid,
borderLeft: false,
borderLeftColor: #dddddd,
borderLeftWidth: 5px,
borderLeftStyle: solid,
borderRadius: 0px,
) !default;
// $wdpk-menu-align-items - Align menu items 'flex-start' 'flex-end' 'center'
$wdpk-menu-align-items: center;
$wdpk-bottom-bar-enabled: true;
// $wdpk-menu-logo-align - Set the alignment for the logo in the header
$wdpk-menu-logo-align: center;
// =============================>
// Dark Theme Override
// If you you need to use the dark theme just uncomment the below line
// <============================
@import "../../../../sass/variables/variables-wdpk-dark";