Smart header
The smart header is a custom made component by yours trully. Its purpose is to offer an alternative header on page scroll with its contents totally customizable by the user.
Basic usage
To create a smart header, create a new header component and give it the data attribute of data-smart-header. A JavaScript program will then find it and perform the necessary operations.
Due to the nature of the script, the smart header cannot be demo'ed in this documentation, but can be viewed instead on the live demo page (demo-1.html for example). If your browser has JavaScript enabled, you'll see that on page scroll a new header will slide down from the top showing the logo and navigation that would otherwise be hidden on page scroll. Here's a quick rundown of the way it works:
- On page load, a piece of JavaScript code searches for any element with the data attribute of
data-smart-header. - When it finds it, it clones that header, basically creating an identical copy but at the same time adds the class of
.cloned. - The original header stays in its original position while the cloned one will become fixed and will slide down when scrolling past a certain point.
- Depending on what's in your original header, some elements might be hidden in the cloned one or some elements might be hidden in the original header and shown on the clone. That's being done by using some helper classes (see below).
Here's a quick code example of a smart header:
<header class="grid sm-center lg-distribute middle main" data-smart-header>
<div class="cell shrink">
<a href="landing-1.html" class="hide-on-cloned"><img src="assets/img/placeholder/placeholder-logo-light.svg" alt="Logo"></a>
<a href="landing-1.html" class="show-on-cloned"><img src="assets/img/blank.png" data-src="assets/img/placeholder/placeholder-logo-dark.svg" class="lazyload" alt="Logo"></a>
</div> <!-- end .cell -->
<nav class="cell shrink menu hide-sm show-lg" data-internal-nav>
<ul>
<li><a href="#features-v1">Features v1</a></li>
<li><a href="#features-v2">Features v2</a></li>
<li><a href="#testimonials-v1">Testimonials v1</a></li>
</ul>
</nav>
</header> <!-- end header.main -->
Helper classes
The code example above is the same one from demo-1.html. Notice that the logo in the cloned header is different from the one in the original header and a quick look at the code will show you that both logos are included in the markup from the beginning. However, by using the helper classes of .hide-on-cloned and .show-on-cloned you can easily control which item is hidden or shown on the cloned header. This is very useful for when you want to show additional items on a cloned header or change logos in between original and clone.
<header class="grid sm-center lg-distribute middle main" data-smart-header>
<div class="cell shrink">
<a href="landing-2.html"><img src="assets/img/placeholder/placeholder-logo-dark.svg" alt="Logo"></a>
</div> <!-- end .cell -->
<nav class="cell shrink menu hide-sm show-lg" data-internal-nav>
<ul>
<li><a href="#presentation-video">Presentation Video</a></li>
<li><a href="#features-v3">Features v3</a></li>
<li><a href="#pricing-v1">Pricing v1</a></li>
<li><a href="register.html" class="button ghost pill external show-on-cloned">Button Text</a></li>
</ul>
</nav>
</header> <!-- end header.main -->
In this example a ghost button will only be shown on the cloned header and not the original.