Mega Menu
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at ullamcorper mauris, vitae imperdiet tortor. Cras aliquet gravida lacus eu auctor
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 = "#">
<img alt = "WoodPecker Logo"
src = "/assets/WoodPecker-logo-blue.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-lg-3 col-12 order-0 wdpk-nav-branding align-self-center">
<a href = "#">
<img alt = "WoodPecker Logo"
src = "/assets/WoodPecker-logo-blue.png">
</a>
</div>
<!-- / Logo Area Area For Navbar -->
<!-- Navigation Menu Area For Navbar -->
<div class = "col-lg-9 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 = "#"
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 -->
</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 -->
</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 = "#/demos/main-demo/shortcodes/accordion-light.html"
class = "wdpk-dropDown-item">
<i class = "fas fa fa-bars"></i>
Accordions
</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 = "#/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 -->
</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 = "#/demos/main-demo/shortcodes/comments.html"
class = "wdpk-dropDown-item">
<i class = "fas fa fa-comments"></i>
Comments
</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 = "#/demos/main-demo/shortcodes/infobox.html"
class = "wdpk-dropDown-item">
<i class = "fas fa fa-info"></i>
Infobox
</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 = "#/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 -->
</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 = "#/demos/main-demo/shortcodes/tables.html"
class = "wdpk-dropDown-item">
<i class = "fas fa fa-table"></i>
Tables
</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 = "#/demos/main-demo/blog/blog-masonry-2col.html"
class = "wdpk-dropDown-item">
Two Columns
</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 = "#/demos/main-demo/blog/blog-grid-2col.html"
class = "wdpk-dropDown-item">
Two Columns
</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 = "#/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 = "#/demos/main-demo/blog/blog-classic-leftbar.html"
class = "wdpk-dropDown-item">
Left Sidebar
</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 = "#"
class = "wdpk-dropDown-item">
Default
</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 Mobile 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>
