Header With Gradient Topbar
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 = "#">
<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>
$wdpk-primary-color: #0056c6 !default;
$wdpk-menu-font-color-hover: #ffffff;
$wdpk-topbar-font-color: #dee2e6;
$wdpk-menu-background: (
backgroundType: color,
gradientType: linear,
color1: rgba(255, 255, 255, 1),
color2: rgba(0, 0, 0, 0.7),
degree: 90deg,
backgroundImage: url(../../assets/images/grey.png),
backgroundRepeat: repeat-x,
backgroundHorPos: center,
backgroundVerPos: center,
backgroundSize: initial
);
$wdpk-hover-effect: (
hoverType: 4,
paddingBottom: 8px,
hoverThickness: 2px,
hoverColorType: gradient,
animationType: leftToRight,
animationDistance: 10px,
animationDuration: 0.6s,
animationDelay: 0s,
col1: #0056c6,
col2: #0BC9CD,
);
$wdpk-topbar-background: (
backgroundType: gradient,
gradientType: linear,
color1: #0056c6,
color2: #0BC9CD,
degree: 0deg,
backgroundImage: url(../../assets/images/grey.png),
backgroundRepeat: repeat-x,
backgroundHorPos: center,
backgroundVerPos: center,
backgroundSize: initial
);
$wdpk-sticky-menu-font-color-hover: #ffffff !default;
