Tornado Logo
Download

Navbar/Header

Tornado Provides Predesigned Navigation Bars and Header's With Useful Elements Thats fit Alomst All Your Needs.

Sass Customize

in order to edit the Header's you can use the css class's to overide the theme or you can edit it with sass Tornado Folder/SCSS/elements/_headers.scss and do not forget to compile the main files of the framework Tornado Folder/SCSS/tornado.scss and tornado-rtl.scss.

Standard Header

a Standard Design off Responsive Progressive App Like 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 and Dropdown Buttons

Collapsed Menu Mode Of The Responsive Navigation Menu in Order To Change The Menu Mode Just Add Class collapsed. to both Menu and its Related Button , and for Making an Action Button With a Dropdown Component You Have to Put The Button Inside a Div and Give it a Class Name dropdown then add a class for the button named dropdown-btn, after that you create your dropdown component with class name dropdown-list whether its a list or other dropdown style like products cart, see the example's below. 


<!-- 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:emailname@sitename.com">emailname@sitename.co</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 -->

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.
Next Breadcrumb Previous Responsive Menus