Tornado Header

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 easily 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.