Default Theme Dark Theme
Tornado Logo
Tornado has become Phenix Design System

» Navbars and Headers

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

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.

Copyright (c) 2016-present, Tornado UI Licensed under the terms of the MIT License.