Header Fullscreen
Catches your visitors' attention with a nice edge-to-edge screen header, no matter what is the screen width and height.
How to use?
Copy-paste the following <script>s near the end of your pages under JS Implementing Plugins to enable them.
<script src="./assets/vendor/hs-header-fullscreen/dist/hs-header-fullscreen.min.js"></script>
Copy-paste the init functions under JS Plugins Init., before the closing </body> tag, to enable it.
<script>
$(document).on('ready', function () {
// INITIALIZATION OF HEADER FULLSCREEN
// =======================================================
var headerFullscreen = new HSHeaderFullscreen($('#headerFullscreen')).init();
});
</script>
Basic
Navbar includes the following basic classes:
.fullscreenfor positioning the navbar full width and height..fullscreen-showed(active class) to open/close navbar..fullscreen-containerfor a full-screen content..fullscreen-overlayfor use with background overlay color.
Here's an example of all the sub-components included in a responsive header fullscreen.
Fullscreen navbars can be closed with
closehamburger button and alsoESCkeyboard. However, the examples do not include theclosebutton, due to positioning (extra stylesheet). An example with aclosehamburger can be seen in the following page: Header Fullscreen
Navbar navigation links build on our .fullscreen-submenu options with their own modifier class. Navigation in navbars will also grow to occupy as much vertical space as possible to keep your navbar contents securely aligned.
<!-- Fullscreen Toggle Button -->
<button id="headerToggler" type="button" class="navbar-toggler fullscreen-toggler btn btn-icon btn-sm btn-soft-secondary rounded-circle"
aria-label="Toggle navigation"
aria-expanded="false"
data-toggle="button"
aria-controls="headerFullscreen"
data-target="#headerFullscreen">
<span class="navbar-toggler-default">
<svg width="14" height="14" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
<path fill="currentColor" d="M17.4,6.2H0.6C0.3,6.2,0,5.9,0,5.5V4.1c0-0.4,0.3-0.7,0.6-0.7h16.9c0.3,0,0.6,0.3,0.6,0.7v1.4C18,5.9,17.7,6.2,17.4,6.2z M17.4,14.1H0.6c-0.3,0-0.6-0.3-0.6-0.7V12c0-0.4,0.3-0.7,0.6-0.7h16.9c0.3,0,0.6,0.3,0.6,0.7v1.4C18,13.7,17.7,14.1,17.4,14.1z"/>
</svg>
</span>
<span class="navbar-toggler-toggled">
<svg width="14" height="14" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
<path fill="currentColor" d="M11.5,9.5l5-5c0.2-0.2,0.2-0.6-0.1-0.9l-1-1c-0.3-0.3-0.7-0.3-0.9-0.1l-5,5l-5-5C4.3,2.3,3.9,2.4,3.6,2.6l-1,1 C2.4,3.9,2.3,4.3,2.5,4.5l5,5l-5,5c-0.2,0.2-0.2,0.6,0.1,0.9l1,1c0.3,0.3,0.7,0.3,0.9,0.1l5-5l5,5c0.2,0.2,0.6,0.2,0.9-0.1l1-1 c0.3-0.3,0.3-0.7,0.1-0.9L11.5,9.5z"/>
</svg>
</span>
</button>
<!-- End Fullscreen Toggle Button -->
<!-- Navigation -->
<div id="headerFullscreen" class="fullscreen"
data-hs-header-fullscreen-options='{
"overlayClass": "fullscreen-overlay"
}'
aria-labelledby="headerToggler">
<div class="fullscreen-container">
<div class="container">
<div class="fullscreen-body">
<div class="row justify-content-md-between align-items-center">
<div id="fullscreenWrapper" class="col-md-6">
<!-- List -->
<ul id="fullscreenNav" class="fullscreen-nav">
<!-- Home Section -->
<li class="u-has-submenu fullscreen-submenu">
<a class="fullscreen-nav-link" href="#homeCollapse" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="homeCollapse">
Home
</a>
<ul id="homeCollapse" class="collapse fullscreen-nav-list" data-parent="#fullscreenWrapper">
<!-- Home - Classic -->
<li class="u-has-submenu fullscreen-submenu">
<a class="fullscreen-submenu-nav-link" href="#homeClassicSubNavCollapse" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="homeClassicSubNavCollapse">
Classic
</a>
<ul id="homeClassicSubNavCollapse" class="collapse fullscreen-submenu-list" data-parent="#fullscreenNav">
<li><a class="nav-link fullscreen-submenu-list-link" href="#">Agency</a></li>
<li><a class="nav-link fullscreen-submenu-list-link" href="#">Analytics</a></li>
<li><a class="nav-link fullscreen-submenu-list-link" href="#">Studio</a></li>
<li><a class="nav-link fullscreen-submenu-list-link" href="#">Marketing</a></li>
<li><a class="nav-link fullscreen-submenu-list-link" href="#">Advertisement</a></li>
<li><a class="nav-link fullscreen-submenu-list-link" href="#">Consulting</a></li>
<li><a class="nav-link fullscreen-submenu-list-link" href="#">Portfolio</a></li>
<li><a class="nav-link fullscreen-submenu-list-link" href="#">Software</a></li>
<li><a class="nav-link fullscreen-submenu-list-link" href="#">Business</a></li>
</ul>
</li>
<!-- End Home - Classic -->
<!-- Home - App -->
<li class="u-has-submenu fullscreen-submenu">
<a class="fullscreen-submenu-nav-link" href="#homeAppSubNavCollapse" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="homeAppSubNavCollapse">
App
</a>
<ul id="homeAppSubNavCollapse" class="collapse fullscreen-submenu-list" data-parent="#fullscreenNav">
<li><a class="nav-link fullscreen-submenu-list-link" href="#">UI Kit</a></li>
<li><a class="nav-link fullscreen-submenu-list-link" href="#">App SaaS</a></li>
<li><a class="nav-link fullscreen-submenu-list-link" href="#">App Workflow</a></li>
<li><a class="nav-link fullscreen-submenu-list-link" href="#">App Payment</a></li>
<li><a class="nav-link fullscreen-submenu-list-link" href="#">App Software</a></li>
</ul>
</li>
<!-- End Home - App -->
<!-- Home - Onepages -->
<li class="u-has-submenu fullscreen-submenu">
<a class="fullscreen-submenu-nav-link" href="#homeOnepagesSubNavCollapse" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="homeOnepagesSubNavCollapse">
Onepages
</a>
<ul id="homeOnepagesSubNavCollapse" class="collapse fullscreen-submenu-list" data-parent="#fullscreenNav">
<li><a class="nav-link fullscreen-submenu-list-link" href="#">Corporate</a></li>
<li><a class="nav-link fullscreen-submenu-list-link" href="#">SaaS</a></li>
</ul>
</li>
<!-- End Home - Onepages -->
</ul>
</li>
<!-- End Home Section -->
<!-- Page Section -->
<li class="u-has-submenu fullscreen-submenu">
<a class="fullscreen-nav-link" href="#pagesCollapse" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="pagesCollapse">
Pages
</a>
<ul id="pagesCollapse" class="collapse fullscreen-nav-list"
data-parent="#fullscreenWrapper">
<!-- Page - Account -->
<li class="u-has-submenu fullscreen-submenu">
<a class="fullscreen-submenu-nav-link" role="button" href="#pagesAccountCollapse" data-toggle="collapse" aria-expanded="false" aria-controls="pagesAccountCollapse">
Account
</a>
<ul id="pagesAccountCollapse" class="collapse fullscreen-submenu-list" data-parent="#fullscreenNav">
<li><a class="nav-link fullscreen-submenu-list-link" href="#">Dashboard</a></li>
<li><a class="nav-link fullscreen-submenu-list-link" href="#">Profile</a></li>
<li><a class="nav-link fullscreen-submenu-list-link" href="#">My tasks</a></li>
<li><a class="nav-link fullscreen-submenu-list-link" href="#">Projects</a></li>
<li><a class="nav-link fullscreen-submenu-list-link" href="#">Members</a></li>
<li><a class="nav-link fullscreen-submenu-list-link" href="#">Edit profile</a></li>
<li><a class="nav-link fullscreen-submenu-list-link" href="#">Change password</a></li>
<li><a class="nav-link fullscreen-submenu-list-link" href="#">Notifications</a></li>
<li><a class="nav-link fullscreen-submenu-list-link" href="#">Activity</a></li>
<li><a class="nav-link fullscreen-submenu-list-link" href="#">Payment methods</a></li>
<li><a class="nav-link fullscreen-submenu-list-link" href="#">Invite friends</a></li>
<li><a class="nav-link fullscreen-submenu-list-link" href="#">Plans</a></li>
<li><a class="nav-link fullscreen-submenu-list-link" href="#">API Token</a></li>
</ul>
</li>
<!-- End Page - Account -->
<!-- Page - Company -->
<li class="u-has-submenu fullscreen-submenu">
<a class="fullscreen-submenu-nav-link" role="button" href="#pagesCompanyCollapse" data-toggle="collapse" aria-expanded="false" aria-controls="pagesCompanyCollapse">
Company
</a>
<ul id="pagesCompanyCollapse" class="collapse fullscreen-submenu-list" data-parent="#fullscreenNav">
<li><a class="nav-link fullscreen-submenu-list-link" href="#">About Agency</a></li>
<li><a class="nav-link fullscreen-submenu-list-link" href="#">Services Agency</a></li>
<li><a class="nav-link fullscreen-submenu-list-link" href="#">Customers</a></li>
<li><a class="nav-link fullscreen-submenu-list-link" href="#">Customer story</a></li>
<li><a class="nav-link fullscreen-submenu-list-link" href="#">Careers</a></li>
<li><a class="nav-link fullscreen-submenu-list-link" href="#">Careers Single</a></li>
<li><a class="nav-link fullscreen-submenu-list-link" href="#">Hire Us</a></li>
</ul>
</li>
<!-- End Page - Company -->
<!-- Page - Portfolio -->
<li class="u-has-submenu fullscreen-submenu">
<a class="fullscreen-submenu-nav-link" role="button" href="#pagesPortfolioCollapse" data-toggle="collapse" aria-expanded="false" aria-controls="pagesPortfolioCollapse">
Portfolio
</a>
<ul id="pagesPortfolioCollapse" class="collapse fullscreen-submenu-list" data-parent="#fullscreenNav">
<li><a class="nav-link fullscreen-submenu-list-link" href="#">Grid</a></li>
<li><a class="nav-link fullscreen-submenu-list-link" href="#">Masonry</a></li>
<li><a class="nav-link fullscreen-submenu-list-link" href="#">Modern</a></li>
<li><a class="nav-link fullscreen-submenu-list-link" href="#">Case Studies Branding</a></li>
<li><a class="nav-link fullscreen-submenu-list-link" href="#">Case Studies Product</a></li>
<li><a class="nav-link fullscreen-submenu-list-link" href="#">Single Page List</a></li>
<li><a class="nav-link fullscreen-submenu-list-link" href="#">Single Page Grid</a></li>
<li><a class="nav-link fullscreen-submenu-list-link" href="#">Single Page Masonry</a></li>
</ul>
</li>
<!-- End Page - Portfolio -->
<!-- Page - Login -->
<li class="u-has-submenu fullscreen-submenu">
<a class="fullscreen-submenu-nav-link" role="button" href="#pagesLoginCollapse" data-toggle="collapse" aria-expanded="false" aria-controls="pagesLoginCollapse">
Login
</a>
<ul id="pagesLoginCollapse" class="collapse fullscreen-submenu-list" data-parent="#fullscreenNav">
<li><a class="nav-link fullscreen-submenu-list-link" href="#">Login</a></li>
<li><a class="nav-link fullscreen-submenu-list-link" href="#">Signup</a></li>
<li><a class="nav-link fullscreen-submenu-list-link" href="#">Recover Account</a></li>
<li><a class="nav-link fullscreen-submenu-list-link" href="#">Login Simple</a></li>
<li><a class="nav-link fullscreen-submenu-list-link" href="#">Signup Simple</a></li>
<li><a class="nav-link fullscreen-submenu-list-link" href="#">Recover Account Simple</a></li>
</ul>
</li>
<!-- End Page - Login -->
<!-- Page - Contacts -->
<li class="u-has-submenu fullscreen-submenu">
<a class="fullscreen-submenu-nav-link" role="button" href="#pagesContactsCollapse" data-toggle="collapse" aria-expanded="false" aria-controls="pagesContactsCollapse">
Contacts
</a>
<ul id="pagesContactsCollapse" class="collapse fullscreen-submenu-list" data-parent="#fullscreenNav">
<li><a class="nav-link fullscreen-submenu-list-link" href="#">Contacts Agency</a></li>
<li><a class="nav-link fullscreen-submenu-list-link" href="#">Contacts Start-Up</a></li>
</ul>
</li>
<!-- End Page - Contacts -->
<!-- Page - Utilities -->
<li class="u-has-submenu fullscreen-submenu">
<a class="fullscreen-submenu-nav-link" role="button" href="#pagesUtilitiesCollapse" data-toggle="collapse" aria-expanded="false" aria-controls="pagesUtilitiesCollapse">
Utilities
</a>
<ul id="pagesUtilitiesCollapse" class="collapse fullscreen-submenu-list" data-parent="#fullscreenNav">
<li><a class="nav-link fullscreen-submenu-list-link" href="#">Pricing</a></li>
<li><a class="nav-link fullscreen-submenu-list-link" href="#">FAQ</a></li>
<li><a class="nav-link fullscreen-submenu-list-link" href="#">Terms & Conditions</a></li>
<li><a class="nav-link fullscreen-submenu-list-link" href="#">Privacy & Policy</a></li>
</ul>
</li>
<!-- End Page - Utilities -->
<!-- Page - Specialty -->
<li class="u-has-submenu fullscreen-submenu">
<a class="fullscreen-submenu-nav-link" role="button" href="#pagesSpecialtyCollapse" data-toggle="collapse" aria-expanded="false" aria-controls="pagesSpecialtyCollapse">
Specialty
</a>
<ul id="pagesSpecialtyCollapse" class="collapse fullscreen-submenu-list" data-parent="#fullscreenNav">
<li><a class="nav-link fullscreen-submenu-list-link" href="#">Cover Page</a></li>
<li><a class="nav-link fullscreen-submenu-list-link" href="#">Coming Soon</a></li>
<li><a class="nav-link fullscreen-submenu-list-link" href="#">Maintenance Mode</a></li>
<li><a class="nav-link fullscreen-submenu-list-link" href="#">Status</a></li>
<li><a class="nav-link fullscreen-submenu-list-link" href="#">Invoice</a></li>
<li><a class="nav-link fullscreen-submenu-list-link" href="#">Error 404</a></li>
</ul>
</li>
<!-- End Page - Specialty -->
</ul>
</li>
<!-- End Page Section -->
<!-- Blog -->
<li class="u-has-submenu fullscreen-submenu">
<a class="fullscreen-nav-link" href="#blogCollapse" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="blogCollapse">
Blog
</a>
<ul id="blogCollapse" class="collapse fullscreen-nav-list" data-parent="#fullscreenWrapper">
<li><a class="nav-link fullscreen-submenu-list-link" href="journal.html">Journal</a></li>
<li><a class="nav-link fullscreen-submenu-list-link" href="metro.html">Metro</a></li>
<li><a class="nav-link fullscreen-submenu-list-link" href="newsroom.html">Newsroom</a></li>
<li><a class="nav-link fullscreen-submenu-list-link" href="blog-profile.html">Blog Profile</a></li>
<li><a class="nav-link fullscreen-submenu-list-link" href="single-article.html">Single Article</a></li>
</ul>
</li>
<!-- End Blog -->
<!-- Shop Section -->
<li class="u-has-submenu fullscreen-submenu">
<a class="fullscreen-nav-link" href="#shopCollapse" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="shopCollapse">
Shop
</a>
<ul id="shopCollapse" class="collapse fullscreen-nav-list" data-parent="#fullscreenWrapper">
<li><a class="nav-link fullscreen-submenu-list-link" href="#">Classic</a></li>
<li><a class="nav-link fullscreen-submenu-list-link" href="#">Categories</a></li>
<li><a class="nav-link fullscreen-submenu-list-link" href="#">Categories Sidebar</a></li>
<li><a class="nav-link fullscreen-submenu-list-link" href="#">Products Grid</a></li>
<li><a class="nav-link fullscreen-submenu-list-link" href="#">Products List</a></li>
<li><a class="nav-link fullscreen-submenu-list-link" href="#">Single Product</a></li>
<li><a class="nav-link fullscreen-submenu-list-link" href="#">Empty Cart</a></li>
<li><a class="nav-link fullscreen-submenu-list-link" href="#">Cart</a></li>
<li><a class="nav-link fullscreen-submenu-list-link" href="#">Checkout</a></li>
<li><a class="nav-link fullscreen-submenu-list-link" href="#">Order Completed</a></li>
</ul>
</li>
<!-- End Shop Section -->
<!-- Demos -->
<li class="u-has-submenu fullscreen-submenu">
<a class="fullscreen-nav-link" href="#demosCollapse" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="demosCollapse">
Demos
</a>
<ul id="demosCollapse" class="collapse fullscreen-nav-list" data-parent="#fullscreenWrapper">
<li><a class="nav-link fullscreen-submenu-list-link" href="#">Education</a></li>
<li><a class="nav-link fullscreen-submenu-list-link" href="#">App Marketplace</a></li>
<li><a class="nav-link fullscreen-submenu-list-link" href="#">Help Desk</a></li>
<li><a class="nav-link fullscreen-submenu-list-link" href="#">Job</a></li>
<li><a class="nav-link fullscreen-submenu-list-link" href="#">House</a></li>
<li><a class="nav-link fullscreen-submenu-list-link" href="#">Crypto landing</a></li>
</ul>
</li>
<!-- End Demos -->
<!-- Docs Section -->
<li class="u-has-submenu fullscreen-submenu">
<a class="fullscreen-nav-link" href="#docsCollapse" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="docsCollapse">
Docs
</a>
<ul id="docsCollapse" class="collapse fullscreen-nav-list" data-parent="#fullscreenWrapper">
<li><a class="nav-link fullscreen-submenu-list-link" href="#">Documentation</a></li>
<li><a class="nav-link fullscreen-submenu-list-link" href="#">Get started</a></li>
</ul>
</li>
<!-- End Docs Section -->
</ul>
<!-- End List -->
</div>
<div class="col-md-4 d-none d-md-inline-block">
<!-- Address -->
<div class="mb-7">
<span class="d-block text-white font-weight-bold mb-3">Address</span>
<address class="mb-0">
<span class="d-block text-white-70 mb-1">+1 (062) 109-9222</span>
<span class="d-block text-white-70 mb-1">hello@example.com</span>
<span class="d-block text-white-70 mb-1">153 Williamson Plaza, Maggieberg, MT 09514</span>
</address>
</div>
<!-- End Address -->
<!-- Social Networks -->
<span class="d-block text-white font-weight-bold mb-3">Social</span>
<ul class="list-inline mb-0">
<li class="list-inline-item">
<a class="btn btn-xs btn-icon btn-soft-light rounded-circle" href="#">
<i class="fab fa-facebook-f"></i>
</a>
</li>
<li class="list-inline-item">
<a class="btn btn-xs btn-icon btn-soft-light rounded-circle" href="#">
<i class="fab fa-google"></i>
</a>
</li>
<li class="list-inline-item">
<a class="btn btn-xs btn-icon btn-soft-light rounded-circle" href="#">
<i class="fab fa-twitter"></i>
</a>
</li>
<li class="list-inline-item">
<a class="btn btn-xs btn-icon btn-soft-light rounded-circle" href="#">
<i class="fab fa-github"></i>
</a>
</li>
</ul>
<!-- End Social Networks -->
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End Navigation -->
Placement
Use our header position utilities to place navbars in various positions.
Extend
By assigning a variable, you can call the standard methods of the plugin:
<script>
$(document).on('ready', function () {
// INITIALIZATION OF HEADER FULLSCREEN
// =======================================================
var headerFullscreen = new HSHeaderFullscreen($('#headerFullscreen'), {
afterOpen: function() {
alert('afterOpen callback done!');
},
afterClose: function() {
alert('afterClose callback done!');
}
}).init();
});
</script>
Attributes
By assigning a variable, you can call the standard methods of the plugin:
data-hs-header-fullscreen-options='{
...
}' - array
Methods
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-hs-header-fullscreen-options='{}'.
| Parameters | Description | Default value |
|---|---|---|
|
|
Overlay class | 'fullscreen-overlay' |
|
|
Executes code inside the function body every time after opening | - |
|
|
Executes code inside the function body every time after closing | - |