Offcavas Menu
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" class = ""></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 wdpk-offCanvas wdpk-sticky-navbar" data-scroll-header = "">
<!-- Container For Header Contents -->
<div class = "container">
<!-- Row For Header Contents -->
<div class = "row h-100">
<!-- Logo Area For Navbar -->
<div class = "col-12 order-0 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 -->
<!-- Navigation Menu Area For Navbar -->
<div class = "col-12 order-1 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 = "/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 = "/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 = "/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 = "/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 = "/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 = "/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 = "/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 = "/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 = "#" 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 = "/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 = "/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 = "/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 = "/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 = "/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 = "/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 = "/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 = "#" 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 = "/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 = "/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 = "/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 = "/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 = "/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 = "/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 = "/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 = "/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 = "#" 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 = "/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 = "/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 = "/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 = "/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 = "/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 = "/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 = "/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 = "/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 = "/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 = "/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 = "/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 = "/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 = "#" 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 = "/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 = "/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 = "/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 = "/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 = "#" 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 = "/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 = "/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 = "/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 = "/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 = "/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 = "#" 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 = "/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 = "/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 = "/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 = "/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 = "/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 = "/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 = "#" 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 = "/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 = "/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 = "/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 = "#" 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 = "/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 = "/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 = "/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 = "/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 = "/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 = "/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-12 wdpk-mega-menu-section">
<div class = "wdpk-mega-title"></div>
<ul class = "wdpk-dropDown">
<!-- Mega Menu Items -->
<li>
<a id = ""
href = "/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 = "/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 = "/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 = "/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 = "/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 = "/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 = "/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-12 wdpk-mega-menu-section">
<div class = "wdpk-mega-title"></div>
<ul class = "wdpk-dropDown">
<!-- Mega Menu Items -->
<li>
<a id = "" href = "/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 = "/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 = "/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 = "/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 = "/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 = "/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 = "/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-12 wdpk-mega-menu-section">
<div class = "wdpk-mega-title"></div>
<ul class = "wdpk-dropDown">
<!-- Mega Menu Items -->
<li>
<a id = ""
href = "/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 = "/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 = "/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 = "/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 = "/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 = "/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-12 wdpk-mega-menu-section">
<div class = "wdpk-mega-title"></div>
<ul class = "wdpk-dropDown">
<!-- Mega Menu Items -->
<li>
<a id = "" href = "/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 = "/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 = "/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 = "/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 = "/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 = "/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 = "/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-12 wdpk-mega-menu-section">
<div class = "wdpk-mega-title"></div>
<ul class = "wdpk-dropDown">
<!-- Mega Menu Items -->
<li>
<a id = ""
href = "/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 = "/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 = "/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 = "/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 = "/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 = "/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 = "/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-12 wdpk-mega-menu-section">
<div class = "wdpk-mega-title"></div>
<ul class = "wdpk-dropDown">
<!-- Mega Menu Items -->
<li>
<a id = "" href = "/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 = "/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 = "/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 = "/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-12 wdpk-mega-menu-section">
<div class = "wdpk-mega-title">Masonry</div>
<ul class = "wdpk-dropDown">
<!-- Mega Menu Items -->
<li>
<a id = ""
href = "/demos/main-demo/blog/blog-masonry-2col.html"
class = "wdpk-dropDown-item">
<i class = "fas fa fa-"></i>
Two Columns
</a>
</li>
<!-- /Mega Menu Items -->
<!-- Mega Menu Items -->
<li>
<a id = ""
href = "/demos/main-demo/blog/blog-masonry-3col.html"
class = "wdpk-dropDown-item">
<i class = "fas fa fa-"></i>
Three Columns
</a>
</li>
<!-- /Mega Menu Items -->
<!-- Mega Menu Items -->
<li>
<a id = ""
href = "/demos/main-demo/blog/blog-masonry-4col.html"
class = "wdpk-dropDown-item">
<i class = "fas fa fa-"></i>
Four Columns
</a>
</li>
<!-- /Mega Menu Items -->
<!-- Mega Menu Items -->
<li>
<a id = ""
href = "/demos/main-demo/blog/blog-masonry-4col.html"
class = "wdpk-dropDown-item">
<i class = "fas fa fa-"></i>
With Shadow
</a>
</li>
<!-- /Mega Menu Items -->
<!-- Mega Menu Items -->
<li>
<a id = ""
href = "/demos/main-demo/blog/blog-masonry-colored.html"
class = "wdpk-dropDown-item">
<i class = "fas fa fa-"></i>
Colored
</a>
</li>
<!-- /Mega Menu Items -->
<!-- Mega Menu Items -->
<li>
<a id = ""
href = "/demos/main-demo/blog/blog-masonry-2col.html"
class = "wdpk-dropDown-item">
<i class = "fas fa fa-"></i>
Right Sidebar
</a>
</li>
<!-- /Mega Menu Items -->
<!-- Mega Menu Items -->
<li>
<a id = ""
href = "/demos/main-demo/blog/blog-masonry-leftbar.html"
class = "wdpk-dropDown-item">
<i class = "fas fa fa-"></i>
Left Sidebar
</a>
</li>
<!-- /Mega Menu Items -->
<!-- Mega Menu Items -->
<li>
<a id = ""
href = "/demos/main-demo/blog/blog-masonry-4col.html"
class = "wdpk-dropDown-item">
<i class = "fas fa fa-"></i>
Full Width
</a>
</li>
<!-- /Mega Menu Items -->
</ul>
</div>
<!-- /Section for Mega Menu -->
<!-- Section for Mega Menu -->
<div class = "col-12 wdpk-mega-menu-section">
<div class = "wdpk-mega-title">Grid</div>
<ul class = "wdpk-dropDown">
<!-- Mega Menu Items -->
<li>
<a id = ""
href = "/demos/main-demo/blog/blog-grid-2col.html"
class = "wdpk-dropDown-item">
<i class = "fas fa fa-"></i>
Two Columns
</a>
</li>
<!-- /Mega Menu Items -->
<!-- Mega Menu Items -->
<li>
<a id = ""
href = "/demos/main-demo/blog/blog-grid-3col.html"
class = "wdpk-dropDown-item">
<i class = "fas fa fa-"></i>
Three Columns
</a>
</li>
<!-- /Mega Menu Items -->
<!-- Mega Menu Items -->
<li>
<a id = ""
href = "/demos/main-demo/blog/blog-grid-4col.html"
class = "wdpk-dropDown-item">
<i class = "fas fa fa-"></i>
Four Columns
</a>
</li>
<!-- /Mega Menu Items -->
<!-- Mega Menu Items -->
<li>
<a id = ""
href = "/demos/main-demo/blog/blog-grid-4col.html"
class = "wdpk-dropDown-item">
<i class = "fas fa fa-"></i>
With Shadow
</a>
</li>
<!-- /Mega Menu Items -->
<!-- Mega Menu Items -->
<li>
<a id = ""
href = "/demos/main-demo/blog/blog-grid-colored.html"
class = "wdpk-dropDown-item">
<i class = "fas fa fa-"></i>
Colored
</a>
</li>
<!-- /Mega Menu Items -->
<!-- Mega Menu Items -->
<li>
<a id = ""
href = "/demos/main-demo/blog/blog-grid-2col.html"
class = "wdpk-dropDown-item">
<i class = "fas fa fa-"></i>
Right Sidebar
</a>
</li>
<!-- /Mega Menu Items -->
<!-- Mega Menu Items -->
<li>
<a id = ""
href = "/demos/main-demo/blog/blog-grid-leftbar.html"
class = "wdpk-dropDown-item">
<i class = "fas fa fa-"></i>
Left Sidebar
</a>
</li>
<!-- /Mega Menu Items -->
<!-- Mega Menu Items -->
<li>
<a id = ""
href = "/demos/main-demo/blog/blog-grid-4col.html"
class = "wdpk-dropDown-item">
<i class = "fas fa fa-"></i>
Full Width
</a>
</li>
<!-- /Mega Menu Items -->
</ul>
</div>
<!-- /Section for Mega Menu -->
<!-- Section for Mega Menu -->
<div class = "col-12 wdpk-mega-menu-section">
<div class = "wdpk-mega-title">Classic</div>
<ul class = "wdpk-dropDown">
<!-- Mega Menu Items -->
<li>
<a id = ""
href = "/demos/main-demo/blog/blog-classic-rightbar.html"
class = "wdpk-dropDown-item">
<i class = "fas fa fa-"></i>
Right Sidebar
</a>
</li>
<!-- /Mega Menu Items -->
<!-- Mega Menu Items -->
<li>
<a id = ""
href = "/demos/main-demo/blog/blog-classic-leftbar.html"
class = "wdpk-dropDown-item">
<i class = "fas fa fa-"></i>
Left Sidebar
</a>
</li>
<!-- /Mega Menu Items -->
<!-- Mega Menu Items -->
<li>
<a id = ""
href = "/demos/main-demo/blog/blog-classic-colored.html"
class = "wdpk-dropDown-item">
<i class = "fas fa fa-"></i>
Backgound Color
</a>
</li>
<!-- /Mega Menu Items -->
<!-- Mega Menu Items -->
<li>
<a id = ""
href = "/demos/main-demo/blog/blog-classic-rightbar.html"
class = "wdpk-dropDown-item">
<i class = "fas fa fa-"></i>
Outline
</a>
</li>
<!-- /Mega Menu Items -->
<!-- Mega Menu Items -->
<li>
<a id = ""
href = "/demos/main-demo/blog/blog-classic-minimal.html"
class = "wdpk-dropDown-item">
<i class = "fas fa fa-"></i>
Minimal
</a>
</li>
<!-- /Mega Menu Items -->
<!-- Mega Menu Items -->
<li>
<a id = ""
href = "/demos/main-demo/blog/blog-classic-shadow.html"
class = "wdpk-dropDown-item">
<i class = "fas fa fa-"></i>
Shadow
</a>
</li>
<!-- /Mega Menu Items -->
</ul>
</div>
<!-- /Section for Mega Menu -->
<!-- Section for Mega Menu -->
<div class = "col-12 wdpk-mega-menu-section">
<div class = "wdpk-mega-title">Single Post</div>
<ul class = "wdpk-dropDown">
<!-- Mega Menu Items -->
<li>
<a id = "" href = "/thing2.html"
class = "wdpk-dropDown-item">
<i class = "fas fa fa-"></i>
Default
</a>
</li>
<!-- /Mega Menu Items -->
<!-- Mega Menu Items -->
<li>
<a id = "" href = "/thing2.html"
class = "wdpk-dropDown-item">
<i class = "fas fa fa-"></i>
Slider
</a>
</li>
<!-- /Mega Menu Items -->
<!-- Mega Menu Items -->
<li>
<a id = ""
href = "/demos/main-demo/shortcodes/video-player.html"
class = "wdpk-dropDown-item">
<i class = "fas fa fa-"></i>
Video
</a>
</li>
<!-- /Mega Menu Items -->
<!-- Mega Menu Items -->
<li>
<a id = "" href = "/thing2.html"
class = "wdpk-dropDown-item">
<i class = "fas fa fa-"></i>
Audio
</a>
</li>
<!-- /Mega Menu Items -->
<!-- Mega Menu Items -->
<li>
<a id = "" href = "/thing1.html"
class = "wdpk-dropDown-item">
<i class = "fas fa fa-"></i>
With Sidebar
</a>
</li>
<!-- /Mega Menu Items -->
<!-- Mega Menu Items -->
<li>
<a id = "" href = "/thing2.html"
class = "wdpk-dropDown-item">
<i class = "fas fa fa-"></i>
Dark Mode
</a>
</li>
<!-- /Mega Menu Items -->
<!-- Mega Menu Items -->
<li>
<a id = "" href = "/thing2.html"
class = "wdpk-dropDown-item">
<i class = "fas fa fa-"></i>
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-12 wdpk-mega-menu-section">
<div class = "wdpk-mega-title">General</div>
<ul class = "wdpk-dropDown">
<!-- Mega Menu Items -->
<li>
<a id = "" href = "/thing1.html"
class = "wdpk-dropDown-item">
<i class = "fas fa fa-"></i>
About Us
</a>
</li>
<!-- /Mega Menu Items -->
<!-- Mega Menu Items -->
<li>
<a id = "" href = "/thing2.html"
class = "wdpk-dropDown-item">
<i class = "fas fa fa-"></i>
About Me
</a>
</li>
<!-- /Mega Menu Items -->
<!-- Mega Menu Items -->
<li>
<a id = "" href = "/thing2.html"
class = "wdpk-dropDown-item">
<i class = "fas fa fa-"></i>
Contact Us
</a>
</li>
<!-- /Mega Menu Items -->
<!-- Mega Menu Items -->
<li>
<a id = "" href = "/thing2.html"
class = "wdpk-dropDown-item">
<i class = "fas fa fa-"></i>
Our Services
</a>
</li>
<!-- /Mega Menu Items -->
<!-- Mega Menu Items -->
<li>
<a id = "" href = "/thing2.html"
class = "wdpk-dropDown-item">
<i class = "fas fa fa-"></i>
Our Clients
</a>
</li>
<!-- /Mega Menu Items -->
</ul>
</div>
<!-- /Section for Mega Menu -->
<!-- Section for Mega Menu -->
<div class = "col-12 wdpk-mega-menu-section">
<div class = "wdpk-mega-title">Gallery</div>
<ul class = "wdpk-dropDown">
<!-- Mega Menu Items -->
<li>
<a id = "" href = "/thing2.html"
class = "wdpk-dropDown-item">
<i class = "fas fa fa-"></i>
Gallery 2 Column
</a>
</li>
<!-- /Mega Menu Items -->
<!-- Mega Menu Items -->
<li>
<a id = "" href = "/thing2.html"
class = "wdpk-dropDown-item">
<i class = "fas fa fa-"></i>
Gallery 3 Column
</a>
</li>
<!-- /Mega Menu Items -->
<!-- Mega Menu Items -->
<li>
<a id = "" href = "/thing2.html"
class = "wdpk-dropDown-item">
<i class = "fas fa fa-"></i>
Gallery 4 Column
</a>
</li>
<!-- /Mega Menu Items -->
<!-- Mega Menu Items -->
<li>
<a id = "" href = "/thing2.html"
class = "wdpk-dropDown-item">
<i class = "fas fa fa-"></i>
Gallery 5 Column
</a>
</li>
<!-- /Mega Menu Items -->
<!-- Mega Menu Items -->
<li>
<a id = "" href = "/thing1.html"
class = "wdpk-dropDown-item">
<i class = "fas fa fa-"></i>
Gallery 6 Column
</a>
</li>
<!-- /Mega Menu Items -->
</ul>
</div>
<!-- /Section for Mega Menu -->
<!-- Section for Mega Menu -->
<div class = "col-12 wdpk-mega-menu-section">
<div class = "wdpk-mega-title">ECommerce</div>
<ul class = "wdpk-dropDown">
<!-- Mega Menu Items -->
<li>
<a id = "" href = "/thing1.html"
class = "wdpk-dropDown-item">
<i class = "fas fa fa-"></i>
Shop 2 Columns
<span class = "badge badge-secondary">Coming Soon</span>
</a>
</li>
<!-- /Mega Menu Items -->
<!-- Mega Menu Items -->
<li>
<a id = "" href = "/thing2.html"
class = "wdpk-dropDown-item">
<i class = "fas fa fa-"></i>
Shop 3 Columns
<span class = "badge badge-secondary">Coming Soon</span>
</a>
</li>
<!-- /Mega Menu Items -->
<!-- Mega Menu Items -->
<li>
<a id = "" href = "/thing2.html"
class = "wdpk-dropDown-item">
<i class = "fas fa fa-"></i>
Shop 4 Columns
<span class = "badge badge-secondary">Coming Soon</span>
</a>
</li>
<!-- /Mega Menu Items -->
<!-- Mega Menu Items -->
<li>
<a id = "" href = "/thing2.html"
class = "wdpk-dropDown-item">
<i class = "fas fa fa-"></i>
Shop 5 Columns
<span class = "badge badge-secondary">Coming Soon</span>
</a>
</li>
<!-- /Mega Menu Items -->
<!-- Mega Menu Items -->
<li>
<a id = "" href = "/thing2.html"
class = "wdpk-dropDown-item">
<i class = "fas fa fa-"></i>
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-12 wdpk-mega-menu-section">
<div class = "wdpk-mega-title">Ultility</div>
<ul class = "wdpk-dropDown">
<!-- Mega Menu Items -->
<li>
<a id = "" href = "/thing2.html"
class = "wdpk-dropDown-item">
<i class = "fas fa fa-"></i>
User Login
</a>
</li>
<!-- /Mega Menu Items -->
<!-- Mega Menu Items -->
<li>
<a id = "" href = "/thing2.html"
class = "wdpk-dropDown-item">
<i class = "fas fa fa-"></i>
User Registration
</a>
</li>
<!-- /Mega Menu Items -->
<!-- Mega Menu Items -->
<li>
<a id = "" href = "/thing2.html"
class = "wdpk-dropDown-item">
<i class = "fas fa fa-"></i>
Password Recovery
</a>
</li>
<!-- /Mega Menu Items -->
<!-- Mega Menu Items -->
<li>
<a id = "" href = "/thing2.html"
class = "wdpk-dropDown-item">
<i class = "fas fa fa-"></i>
404 Page
</a>
</li>
<!-- /Mega Menu Items -->
<!-- Mega Menu Items -->
<li>
<a id = "" href = "/thing2.html"
class = "wdpk-dropDown-item">
<i class = "fas fa fa-"></i>
500 Error
</a>
</li>
<!-- /Mega Menu Items -->
<!-- Mega Menu Items -->
<li>
<a id = "" href = "/thing2.html"
class = "wdpk-dropDown-item">
<i class = "fas fa fa-"></i>
Maintenance Mode
</a>
</li>
<!-- /Mega Menu Items -->
</ul>
</div>
<!-- /Section for Mega Menu -->
</div>
</div>
</div>
<!-- /Container For Mega Menu -->
</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>
<!-- / Navbar -->
</div>
<!-- / Row For Main Navigation -->
</div>
$wdpk-mobile-header-breakpoint: 5;
$wdpk-enable-on-desktop: true;
// $wdpk-menu-logo-align - Set the alignment for the logo in the header
$wdpk-menu-logo-align: center;
