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.
Tornado v2
-
- Sub Total : 352$
- Total : 375$
- Checkout Cart Items
Contact US
-
Email
emailname@sitename.co
Responding in 24 Hours
-
Whatsapp
0025-5567-3364-336
Available 24h a day
<!-- 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
<!-- 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. |