Header With Search Bar
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In leo tortor, pulvinar vitae dui eu, imperdiet eleifend est. Proin tempus urna elit, et tristique felis luctus quis.
Code Snippet To Create Above Results
<div class = "container-fluid wdpk-header-container">
<!-- 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-black-1d0f1d19ebe61398627fe4fed847ced08b56c9095f1e9f4cd525979a390073d7.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">
<!-- Logo Area For Navbar -->
<div class = "col-lg-3 order-0 text-center wdpk-nav-branding align-self-center">
<a href = "http://localhost:4000">
<img alt = "WoodPecker Logo"
src = "/assets/WoodPecker-logo-black-1d0f1d19ebe61398627fe4fed847ced08b56c9095f1e9f4cd525979a390073d7.png">
</a>
</div>
<!-- / Logo Area Area For Navbar -->
<!-- Extras Area For The Navigation Bar -->
<div class = "col-lg-4 offset-lg-5 d-flex justify-content-end order-1 align-self-center">
<div class = "wdpk-menu-search">
<input type = "email" class = "form-control form-control-sm" id = "wdpkSearchInput"
aria-describedby = "SearchInput" placeholder = "Search">
<i class = "fas fa fa-search"></i>
</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-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-menu-border-map: (
borderTop: false,
borderTopColor: #000000,
borderTopWidth: 0px,
borderTopStyle: solid,
borderRight: false,
borderRightColor: #dddddd,
borderRightWidth: 0px,
borderRightStyle: solid,
borderBottom: false,
borderBottomColor: #000000,
borderBottomWidth: 0px,
borderBottomStyle: solid,
borderLeft: false,
borderLeftColor: #dddddd,
borderLeftWidth: 0px,
borderLeftStyle: solid
) !default;
$wdpk-menu-height: 70px;
$wdpk-menu-align-items: center;
$wdpk-bottom-bar-enabled: true;
