Sass Customize
in order to edit the Header’s you can use the css classes to overide the theme or you can edit it with sass src/SCSS/elements/_headers.scss.
Standard Header
a Standard Design Header With Useful Elements [ Logo, Responsive Navigation Menu , Action Buttons ].
<!-- Header -->
<header class="tornado-header">
<div class="container">
<!-- Logo -->
<a href="#" class="logo"> <h1>Tornado v2</h1> </a>
<!-- Main Menu -->
<div class="navigation-menu" data-id="main-menu">
<ul>
<li><a href="#">Home Page</a></li>
<li><a href="#">About US</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">Github</a></li>
<li><a href="#">Download</a>
<!-- Dropdown List -->
<ul>
<li><a href="#">Production Version</a></li>
<li><a href="#">Development Version</a></li>
<li><a href="quick-start.html">Quick Start CDN</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<!-- Action Buttons -->
<div class="action-btns">
<!-- Cart Button -->
<a href="#" class="icon-btn ti-cart"></a>
<!-- Search Button -->
<a href="#" class="icon-btn ti-search"></a>
<!-- Contact Button -->
<a href="#" class="icon-btn ti-phone"></a>
<!-- Main Menu Mobile Button -->
<a href="#" class="menu-btn icon-btn ti-menu-round" data-id="main-menu"></a>
</div>
</div>
</header>
<!-- // Header -->
Collapsed Menu Header
Collapsed Menu Mode Of The Responsive Navigation Menu in Order To Change The Menu Mode Just Add Class collapsed. to both Menu and its Trigger Button.
<!-- Header v1 Collapsed Menu -->
<header class="tornado-header">
<div class="container">
<!-- Logo -->
<a href="#" class="logo"> <h1>Tornado v2</h1> </a>
<!-- Main Menu -->
<div class="navigation-menu collapsed" data-id="main-menu-1">
<ul>
<li><a href="#">Home Page</a></li>
<li><a href="#">About US</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">Github</a></li>
<li><a href="#">Download</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<!-- Action Buttons -->
<div class="action-btns">
<!-- Cart Button -->
<div class="dropdown">
<a href="#" class="icon-btn ti-cart dropdown-btn"></a>
<ul class="dropdown-list cart-list">
<!-- small cart -->
<li class="cart-item">
<a href="#" class="image"><img src="http://via.placeholder.com/75x75" alt=""></a>
<div class="info">
<a href="#"><h3>Lorem Ipsum is simply dummy text of the printing</h3></a>
<h4 class="count">count <input type="number" value="5"></h4>
<h5 class="price">Price : 325$</h5>
</div>
<a href="#" class="ti-close remove-item"></a>
</li>
<!-- info item -->
<li class="info-item">Sub Total : 352$</li>
<!-- info item -->
<li class="info-item">Total : 375$</li>
<!-- buttons item -->
<li class="btns-item">
<a href="#" class="btn small primary">Checkout</a>
<a href="#" class="btn small secondary">Cart Items</a>
</li>
</ul>
</div>
<!-- Search Button -->
<a href="#" class="icon-btn ti-search"></a>
<!-- Contact Button -->
<div class="dropdown">
<a href="#" class="icon-btn ti-phone dropdown-btn"></a>
<ul class="dropdown-list contact-us">
<li><h3>Contact US</h3></li>
<li class="contact-item ti-mail">
<span class="title">Email</span>
<a href="mailto:[email protected]">[email protected]</a>
<p>Responding in 24 Hours</p>
</li>
<li class="contact-item ti-whatsapp">
<span class="title">Whatsapp</span>
<a href="https://api.whatsapp.com/send?phone=0025-5567-3364-336">0025-5567-3364-336</a>
<p>Available 24h a day</p>
</li>
</ul>
</div>
<!-- User Button -->
<div class="dropdown">
<a href="#" class="icon-btn ti-businessman dropdown-btn"></a>
<ul class="dropdown-list">
<li><a href="#">User Profile</a></li>
<li><a href="#">Shopping Cart</a></li>
<li><a href="#">My Wishlist</a></li>
<li><a href="#">Edit Account</a></li>
<li><a href="#">Signout</a></li>
</ul>
</div>
<!-- Main Menu Mobile Button -->
<a href="#" class="menu-btn collapsed icon-btn ti-menu-round" data-id="main-menu-1"></a>
</div>
</div>
</header>
<!-- // Header v1 Collapsed Menu -->
Standard Header Search Box and Button
<!-- Header -->
<header class="tornado-header">
<div class="container">
<!-- Logo -->
<a href="#" class="logo"> <h1>Tornado v2</h1> </a>
<!-- Action Area -->
<div class="action-btns">
<!-- Search Box -->
<form class="form-ui small search-box">
<input type="text" placeholder="search keywords">
<button class="search-btn ti-search"></button>
</form>
<!-- Button -->
<a href="#" class="btn small primary tx-uppercase">Button</a>
</div>
</div>
</header>
<!-- // Header -->
Primary Colored Header
<!-- Header -->
<header class="tornado-header primary">
<div class="container">
<!-- Logo -->
<a href="#" class="logo"> <h1>Tornado v2</h1> </a>
<!-- Main Menu -->
<div class="navigation-menu" data-id="main-menu">
<ul>
<li><a href="#">Home Page</a></li>
<li><a href="#">About US</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">Github</a></li>
<li><a href="#">Download</a>
<!-- Dropdown List -->
<ul>
<li><a href="#">Production Version</a></li>
<li><a href="#">Development Version</a></li>
<li><a href="quick-start.html">Quick Start CDN</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<!-- Action Buttons -->
<div class="action-btns">
<!-- Cart Button -->
<a href="#" class="icon-btn ti-cart"></a>
<!-- Search Button -->
<a href="#" class="icon-btn ti-search"></a>
<!-- Contact Button -->
<a href="#" class="icon-btn ti-phone"></a>
<!-- Main Menu Mobile Button -->
<a href="#" class="menu-btn icon-btn ti-menu-round" data-id="main-menu"></a>
</div>
</div>
</header>
<!-- // Header -->Secondary Colored Header
<!-- Header -->
<header class="tornado-header secondary">
<div class="container">
<!-- Logo -->
<a href="#" class="logo"> <h1>Tornado v2</h1> </a>
<!-- Main Menu -->
<div class="navigation-menu" data-id="main-menu">
<ul>
<li><a href="#">Home Page</a></li>
<li><a href="#">About US</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">Github</a></li>
<li><a href="#">Download</a>
<!-- Dropdown List -->
<ul>
<li><a href="#">Production Version</a></li>
<li><a href="#">Development Version</a></li>
<li><a href="quick-start.html">Quick Start CDN</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<!-- Action Buttons -->
<div class="action-btns">
<!-- Cart Button -->
<a href="#" class="icon-btn ti-cart"></a>
<!-- Search Button -->
<a href="#" class="icon-btn ti-search"></a>
<!-- Contact Button -->
<a href="#" class="icon-btn ti-phone"></a>
<!-- Main Menu Mobile Button -->
<a href="#" class="menu-btn icon-btn ti-menu-round" data-id="main-menu"></a>
</div>
</div>
</header>
<!-- // Header -->Header Theme Mixin
tornado provide a nice control of mixin for the header theme witch you can use to extend or change the colors,sizes,backgrounds easly with sass mixin you can use it by adding the function/mixin inside a selector targeting your header you can see the function and all options that available below.
@include header(
$height : 4.75rem, //====> the Minimum Height
$background : #FFF, //====> Header Bacground
$color : $gray-color, //====> Header Text Color
$font-size : 0.9375rem, //====> Header Text/Menu Font Size
//====> Menu Options All Required <======//
$menu-background-hvr : transparent, //====> Menu Links Hover Background
$menu-color-hvr : $primary-color, //====> Menu Links Hover Color
$dropdown-background : #FFF, //====> Dropdown Menu Background
$dropdown-background-hvr:rgba(0, 0, 0, 0.05), //====> Dropdown Menu Background Hover
$dropdown-color : $gray-color, //====> Dropdown Menu Links Color
$dropdown-color-hvr : $black-color, //====> Dropdown Menu Links Color Hover
//====> Icons buttons <======//
$icon-btn-size : 2.25rem, //====> Icon Button Width/Height
$icon-size:1.25rem, //=====> Icon Button Font Size
$icon-background:transparent, //====> Icon Button Background
$icon-color:$gray-color, //====> Icon Button Color
$icon-background-hvr:null, //====> Icon Button Background
$icon-color-hvr:null, //====> Icon Button Color
)Utilities
| Class Name | Element | Description |
|---|---|---|
| tornado-header | header wrapper | The Main Class For The Header Component. |
| logo | logo image or text wrapper | The Class For Making The Logo Align With The Rest of the Elements. |
| action-btns | Buttons and Icons Wrapper. | Define The Buttons or Action Area and Align Them With The Rest of The Elements. |
| icon-btn | icon button element. | Define The Buttons Element to style it. |
| dropdown | wrapper for a dropdown component. | Define a wrapper for an icon button with dropdown component. |
| dropdown-btn | Dropdown List Toggle button element. | Define a button for the dropdown component. |
| dropdown-list | dropdown list element ul or div | Define a Dropdown list component. |
| search-box | search form element. | Define and Style The Search To Fit Tornado Headeer Style |
| data-sticky | header wrapper Attribute not class | Creating a Sticky Header On Scroll. |
| primary | header wrapper | Coloring Header with The Primary Theme Color. |
| secondary | header wrapper | Coloring Header with The Dark Theme Color. |