Catalogue
In this document you can see a lot of preset navigations to help you start fast as possible with the development. Follow the steps in the documentation to start the installation and then choose a preset navigation. If your desired navigation is not in the catalogue, you can read the documentation to see a more detailed explanation to build your navigation or extend one the examples below adding extra elements, dropdowns, megamenus, etc.
HTML
<nav id="navigation" class="navigation navigation-centered"> <div class="navigation-header"> <div class="navigation-brand-text"> <a href="#">NAVBAR</a> </div> <div class="navigation-button-toggler"> <i class="hamburger-icon"></i> </div> </div> <div class="navigation-body"> <div class="navigation-body-header"> <span class="navigation-body-close-button">✕</span> </div> <ul class="navigation-menu"> <li class="navigation-item is-active"> <a class="navigation-link" href="#">Home</a> </li> <li class="navigation-item"> <a class="navigation-link" href="#">Services</a> </li> <li class="navigation-item"> <a class="navigation-link" href="#">Blog</a> </li> <li class="navigation-item"> <a class="navigation-link" href="#">Contact</a> </li> </ul> </div> </nav>
HTML
<nav id="navigation" class="navigation"> <div class="navigation-header"> <div class="navigation-logo"> <a href="#"> <img src="img/logo.png" alt="logo"> </a> </div> <div class="navigation-button-toggler"> <i class="hamburger-icon"></i> </div> </div> <div class="navigation-body"> <div class="navigation-body-header"> <div class="navigation-logo"> <a href="#"> <img src="img/logo.png" alt="logo"> </a> </div> <span class="navigation-body-close-button">✕</span> </div> <ul class="navigation-menu"> <li class="navigation-item is-active"> <a class="navigation-link" href="#">Home</a> </li> <li class="navigation-item"> <a class="navigation-link" href="#">Services</a> </li> <li class="navigation-item"> <a class="navigation-link" href="#">Blog</a> </li> <li class="navigation-item"> <a class="navigation-link" href="#">Contact</a> </li> </ul> </div> </nav>
HTML
<nav id="navigation" class="navigation navigation-justified"> <div class="navigation-header"> <div class="navigation-logo"> <a href="#"> <img src="img/logo.png" alt="logo"> </a> </div> <div class="navigation-button-toggler"> <i class="hamburger-icon"></i> </div> </div> <div class="navigation-body"> <div class="navigation-body-header"> <div class="navigation-logo"> <a href="#"> <img src="img/logo.png" alt="logo"> </a> </div> <span class="navigation-body-close-button">✕</span> </div> <ul class="navigation-menu"> <li class="navigation-item is-active"> <a class="navigation-link" href="#">Home</a> </li> <li class="navigation-item"> <a class="navigation-link" href="#">Services</a> </li> <li class="navigation-item"> <a class="navigation-link" href="#">Blog</a> </li> <li class="navigation-item"> <a class="navigation-link" href="#">Contact</a> </li> </ul> </div> </nav>
HTML
<nav id="navigation" class="navigation"> <div class="navigation-header"> <div class="navigation-logo"> <a href="#"> <img src="img/logo.png" alt="logo"> </a> </div> <div class="navigation-button-toggler"> <i class="hamburger-icon"></i> </div> </div> <div class="navigation-body"> <div class="navigation-body-header"> <div class="navigation-logo"> <a href="#"> <img src="img/logo.png" alt="logo"> </a> </div> <span class="navigation-body-close-button">✕</span> </div> <ul class="navigation-menu"> <li class="navigation-item is-active"> <a class="navigation-link" href="#">Home</a> </li> <li class="navigation-item"> <a class="navigation-link" href="#">Services</a> </li> <li class="navigation-item"> <a class="navigation-link" href="#">Blog</a> </li> <li class="navigation-item"> <a class="navigation-link" href="#">Contact</a> </li> </ul> <div class="navigation-body-section align-to-right"> <a class="navigation-btn" href="#">Button</a> </div> </div> </nav>
HTML
<nav id="navigation" class="navigation"> <div class="navigation-header"> <div class="navigation-logo"> <a href="#"> <img src="img/logo.png" alt="logo"> </a> </div> <div class="navigation-button-toggler"> <i class="hamburger-icon"></i> </div> </div> <div class="navigation-body"> <div class="navigation-body-header align-to-left"> <div class="navigation-logo"> <a href="#"> <img src="img/logo.png" alt="logo"> </a> </div> <span class="navigation-body-close-button">✕</span> </div> <ul class="navigation-menu"> <li class="navigation-item is-active"> <a class="navigation-link" href="#">Home</a> </li> <li class="navigation-item"> <a class="navigation-link" href="#">Services</a> </li> <li class="navigation-item"> <a class="navigation-link" href="#">Blog</a> </li> <li class="navigation-item"> <a class="navigation-link" href="#">Contact</a> </li> </ul> <div class="navigation-body-section"> <a class="navigation-btn" href="#">Button</a> </div> </div> </nav>
HTML
<nav id="navigation" class="navigation"> <div class="navigation-header"> <div class="navigation-brand-text"> <a href="#">NAVBAR</a> </div> <div class="navigation-button-toggler"> <i class="hamburger-icon"></i> </div> </div> <div class="navigation-body"> <div class="navigation-body-header"> <div class="navigation-brand-text"> <a href="#">NAVBAR</a> </div> <span class="navigation-body-close-button">✕</span> </div> <ul class="navigation-menu"> <li class="navigation-item is-active"> <a class="navigation-link" href="#">Home</a> </li> <li class="navigation-item"> <a class="navigation-link" href="#">Services</a> </li> <li class="navigation-item"> <a class="navigation-link" href="#">Blog</a> </li> <li class="navigation-item"> <a class="navigation-link" href="#">Contact</a> </li> </ul> <div class="navigation-body-section align-to-right"> <form class="navigation-inline-form"> <input class="navigation-input" type="search" name="search" placeholder="Search"> <button type="submit" class="navigation-btn"> <i class="navigation-search-icon"></i> </button> </form> </div> </div> </nav>
HTML
<nav id="navigation" class="navigation"> <div class="navigation-header"> <div class="navigation-brand-text"> <a href="#">NAVBAR</a> </div> <div class="navigation-button-toggler"> <i class="hamburger-icon"></i> </div> </div> <div class="navigation-body"> <div class="navigation-body-header align-to-left"> <div class="navigation-brand-text"> <a href="#">NAVBAR</a> </div> <span class="navigation-body-close-button">✕</span> </div> <ul class="navigation-menu"> <li class="navigation-item is-active"> <a class="navigation-link" href="#">Home</a> </li> <li class="navigation-item"> <a class="navigation-link" href="#">Services</a> </li> <li class="navigation-item"> <a class="navigation-link" href="#">Blog</a> </li> <li class="navigation-item"> <a class="navigation-link" href="#">Contact</a> </li> </ul> <div class="navigation-body-section"> <form class="navigation-inline-form"> <input class="navigation-input" type="search" name="search" placeholder="Search"> <button type="submit" class="navigation-btn"> <i class="navigation-search-icon"></i> </button> </form> </div> </div> </nav>
HTML
<nav id="navigation" class="navigation navigation-justified"> <div class="navigation-header"> <div class="navigation-logo"> <a href="#"> <img src="img/logo.png" alt="logo"> </a> </div> <div class="navigation-button-toggler"> <i class="hamburger-icon"></i> </div> </div> <div class="navigation-body"> <div class="navigation-body-header"> <div class="navigation-logo"> <a href="#"> <img src="img/logo.png" alt="logo"> </a> </div> <span class="navigation-body-close-button">✕</span> </div> <ul class="navigation-menu"> <li class="navigation-item is-active"> <a class="navigation-link" href="#">Home</a> </li> <li class="navigation-item"> <a class="navigation-link" href="#">Services</a> </li> <li class="navigation-item"> <a class="navigation-link" href="#">Blog</a> </li> <li class="navigation-item"> <a class="navigation-link" href="#">Contact</a> </li> </ul> <div class="navigation-body-section"> <a class="navigation-btn" href="#">Button</a> </div> </div> </nav>
HTML
<nav id="navigation" class="navigation navigation-justified"> <div class="navigation-header"> <div class="navigation-brand-text"> <a href="#">NAVBAR</a> </div> <div class="navigation-button-toggler"> <i class="hamburger-icon"></i> </div> </div> <div class="navigation-body"> <div class="navigation-body-header"> <div class="navigation-brand-text"> <a href="#">NAVBAR</a> </div> <span class="navigation-body-close-button">✕</span> </div> <ul class="navigation-menu"> <li class="navigation-item is-active"> <a class="navigation-link" href="#">Home</a> </li> <li class="navigation-item"> <a class="navigation-link" href="#">Services</a> </li> <li class="navigation-item"> <a class="navigation-link" href="#">Blog</a> </li> <li class="navigation-item"> <a class="navigation-link" href="#">Contact</a> </li> </ul> <div class="navigation-body-section"> <form class="navigation-inline-form"> <input class="navigation-input" type="search" name="search" placeholder="Search"> <button type="submit" class="navigation-btn"> <i class="navigation-search-icon"></i> </button> </form> </div> </div> </nav>
HTML
<nav id="navigation" class="navigation"> <div class="navigation-header"> <div class="navigation-logo"> <a href="#"> <img src="img/logo.png" alt="logo"> </a> </div> <div class="navigation-button-toggler"> <i class="hamburger-icon"></i> </div> </div> <div class="navigation-body"> <div class="navigation-body-header"> <div class="navigation-logo"> <a href="#"> <img src="img/logo.png" alt="logo"> </a> </div> <span class="navigation-body-close-button">✕</span> </div> <ul class="navigation-menu"> <li class="navigation-item is-active"> <a class="navigation-link" href="#">Home</a> </li> <li class="navigation-item"> <a class="navigation-link" href="#">Services</a> </li> <li class="navigation-item"> <a class="navigation-link" href="#">Blog</a> </li> <li class="navigation-item"> <a class="navigation-link" href="#">Contact</a> </li> </ul> <div class="navigation-body-section align-to-right"> <form class="navigation-inline-form"> <input class="navigation-input" type="search" name="search" placeholder="Search"> <button type="submit" class="navigation-btn"> <i class="navigation-search-icon"></i> </button> </form> </div> <div class="navigation-body-section"> <a class="navigation-btn" href="#">Button</a> </div> </div> </nav>
Dependences
<link href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" rel="stylesheet">
HTML
<nav id="navigation" class="navigation"> <div class="navigation-header"> <div class="navigation-logo"> <a href="#"> <img src="img/logo.png" alt="logo"> </a> </div> <div class="navigation-button-toggler"> <i class="hamburger-icon"></i> </div> </div> <div class="navigation-body"> <div class="navigation-body-header"> <div class="navigation-logo"> <a href="#"> <img src="img/logo.png" alt="logo"> </a> </div> <span class="navigation-body-close-button">✕</span> </div> <ul class="navigation-menu"> <li class="navigation-item is-active"> <a class="navigation-link" href="#">Home</a> </li> <li class="navigation-item"> <a class="navigation-link" href="#">Services</a> </li> <li class="navigation-item"> <a class="navigation-link" href="#">Blog</a> </li> <li class="navigation-item"> <a class="navigation-link" href="#">Contact</a> </li> </ul> <ul class="navigation-menu navigation-social-menu align-to-right margin-top"> <li class="navigation-item"> <a class="navigation-link" href="#"> <i class="fab fa-facebook-f"></i> </a> </li> <li class="navigation-item"> <a class="navigation-link" href="#"> <i class="fab fa-twitter"></i> </a> </li> <li class="navigation-item"> <a class="navigation-link" href="#"> <i class="fab fa-instagram"></i> </a> </li> </ul> </div> </nav>
Dependences
<link href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" rel="stylesheet">
HTML
<nav id="navigation" class="navigation navigation-justified"> <div class="navigation-header"> <div class="navigation-logo"> <a href="#"> <img src="img/logo.png" alt="logo"> </a> </div> <div class="navigation-button-toggler"> <i class="hamburger-icon"></i> </div> </div> <div class="navigation-body"> <div class="navigation-body-header"> <div class="navigation-logo"> <a href="#"> <img src="img/logo.png" alt="logo"> </a> </div> <span class="navigation-body-close-button">✕</span> </div> <ul class="navigation-menu"> <li class="navigation-item is-active"> <a class="navigation-link" href="#">Home</a> </li> <li class="navigation-item"> <a class="navigation-link" href="#">Services</a> </li> <li class="navigation-item"> <a class="navigation-link" href="#">Blog</a> </li> <li class="navigation-item"> <a class="navigation-link" href="#">Contact</a> </li> </ul> <ul class="navigation-menu navigation-social-menu align-to-right margin-top"> <li class="navigation-item"> <a class="navigation-link" href="#"> <i class="fab fa-facebook-f"></i> </a> </li> <li class="navigation-item"> <a class="navigation-link" href="#"> <i class="fab fa-twitter"></i> </a> </li> <li class="navigation-item"> <a class="navigation-link" href="#"> <i class="fab fa-instagram"></i> </a> </li> </ul> </div> </nav>
Dependences
<link href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" rel="stylesheet">
HTML
<nav id="navigation" class="navigation"> <div class="navigation-header"> <div class="navigation-logo"> <a href="#"> <img src="img/logo.png" alt="logo"> </a> </div> <div class="navigation-button-toggler"> <i class="hamburger-icon"></i> </div> </div> <div class="navigation-body"> <div class="navigation-body-header"> <div class="navigation-logo"> <a href="#"> <img src="img/logo.png" alt="logo"> </a> </div> <span class="navigation-body-close-button">✕</span> </div> <ul class="navigation-menu"> <li class="navigation-item is-active"> <a class="navigation-link" href="#">Home</a> </li> <li class="navigation-item"> <a class="navigation-link" href="#">Services</a> </li> <li class="navigation-item"> <a class="navigation-link" href="#">Blog</a> </li> <li class="navigation-item"> <a class="navigation-link" href="#">Contact</a> </li> </ul> <ul class="navigation-menu align-to-right"> <li class="navigation-item navigation-icon-item"> <a class="navigation-link" href="#"> <i class="fas fa-search"></i> <span>Search</span> </a> </li> </ul> </div> </nav>
Dependences
<link href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" rel="stylesheet">
HTML
<nav id="navigation" class="navigation"> <div class="navigation-header"> <div class="navigation-logo"> <a href="#"> <img src="img/logo.png" alt="logo"> </a> </div> <div class="navigation-button-toggler"> <i class="hamburger-icon"></i> </div> </div> <div class="navigation-body"> <div class="navigation-body-header align-to-left"> <div class="navigation-logo"> <a href="#"> <img src="img/logo.png" alt="logo"> </a> </div> <span class="navigation-body-close-button">✕</span> </div> <ul class="navigation-menu"> <li class="navigation-item is-active"> <a class="navigation-link" href="#">Home</a> </li> <li class="navigation-item"> <a class="navigation-link" href="#">Services</a> </li> <li class="navigation-item"> <a class="navigation-link" href="#">Blog</a> </li> <li class="navigation-item"> <a class="navigation-link" href="#">Contact</a> </li> </ul> <ul class="navigation-menu"> <li class="navigation-item navigation-icon-item"> <a class="navigation-link" href="#"> <i class="fas fa-search"></i> <span>Search</span> </a> </li> </ul> </div> </nav>
Dependences
<link href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" rel="stylesheet">
HTML
<nav id="navigation" class="navigation navigation-justified"> <div class="navigation-header"> <div class="navigation-logo"> <a href="#"> <img src="img/logo.png" alt="logo"> </a> </div> <div class="navigation-button-toggler"> <i class="hamburger-icon"></i> </div> </div> <div class="navigation-body"> <div class="navigation-body-header"> <div class="navigation-logo"> <a href="#"> <img src="img/logo.png" alt="logo"> </a> </div> <span class="navigation-body-close-button">✕</span> </div> <ul class="navigation-menu"> <li class="navigation-item is-active"> <a class="navigation-link" href="#">Home</a> </li> <li class="navigation-item"> <a class="navigation-link" href="#">Services</a> </li> <li class="navigation-item"> <a class="navigation-link" href="#">Blog</a> </li> <li class="navigation-item"> <a class="navigation-link" href="#">Contact</a> </li> </ul> <ul class="navigation-menu"> <li class="navigation-item navigation-icon-item"> <a class="navigation-link" href="#"> <i class="fas fa-search"></i> <span>Search</span> </a> </li> </ul> </div> </nav>
Dependences
<link href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" rel="stylesheet">
HTML
<nav id="navigation" class="navigation"> <div class="navigation-header"> <div class="navigation-logo"> <a href="#"> <img src="img/logo.png" alt="logo"> </a> </div> <div class="navigation-button-toggler"> <i class="hamburger-icon"></i> </div> </div> <div class="navigation-body"> <div class="navigation-body-header"> <div class="navigation-logo"> <a href="#"> <img src="img/logo.png" alt="logo"> </a> </div> <span class="navigation-body-close-button">✕</span> </div> <ul class="navigation-menu"> <li class="navigation-item is-active"> <a class="navigation-link" href="#">Home</a> </li> <li class="navigation-item"> <a class="navigation-link" href="#">Services</a> </li> <li class="navigation-item"> <a class="navigation-link" href="#">Blog</a> </li> <li class="navigation-item"> <a class="navigation-link" href="#">Contact</a> </li> </ul> <ul class="navigation-menu align-to-right"> <li class="navigation-item navigation-icon-item"> <a class="navigation-link" href="#"> <i class="fas fa-shopping-cart"></i> <span>Cart</span> </a> </li> <li class="navigation-item navigation-icon-item"> <a class="navigation-link" href="#"> <i class="fas fa-search"></i> <span>Search</span> </a> </li> </ul> </div> </nav>
Dependences
<link href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" rel="stylesheet">
HTML
<nav id="navigation" class="navigation"> <div class="navigation-header"> <div class="navigation-logo"> <a href="#"> <img src="img/logo.png" alt="logo"> </a> </div> <div class="navigation-button-toggler"> <i class="hamburger-icon"></i> </div> </div> <div class="navigation-body"> <div class="navigation-body-header align-to-left"> <div class="navigation-logo"> <a href="#"> <img src="img/logo.png" alt="logo"> </a> </div> <span class="navigation-body-close-button">✕</span> </div> <ul class="navigation-menu"> <li class="navigation-item is-active"> <a class="navigation-link" href="#">Home</a> </li> <li class="navigation-item"> <a class="navigation-link" href="#">Services</a> </li> <li class="navigation-item"> <a class="navigation-link" href="#">Blog</a> </li> <li class="navigation-item"> <a class="navigation-link" href="#">Contact</a> </li> </ul> <ul class="navigation-menu"> <li class="navigation-item navigation-icon-item"> <a class="navigation-link" href="#"> <i class="fas fa-shopping-cart"></i> <span>Cart</span> </a> </li> <li class="navigation-item navigation-icon-item"> <a class="navigation-link" href="#"> <i class="fas fa-search"></i> <span>Search</span> </a> </li> </ul> </div> </nav>
Dependences
<link href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" rel="stylesheet">
HTML
<nav id="navigation" class="navigation navigation-justified"> <div class="navigation-header"> <div class="navigation-logo"> <a href="#"> <img src="img/logo.png" alt="logo"> </a> </div> <div class="navigation-button-toggler"> <i class="hamburger-icon"></i> </div> </div> <div class="navigation-body"> <div class="navigation-body-header"> <div class="navigation-logo"> <a href="#"> <img src="img/logo.png" alt="logo"> </a> </div> <span class="navigation-body-close-button">✕</span> </div> <ul class="navigation-menu"> <li class="navigation-item is-active"> <a class="navigation-link" href="#">Home</a> </li> <li class="navigation-item"> <a class="navigation-link" href="#">Services</a> </li> <li class="navigation-item"> <a class="navigation-link" href="#">Blog</a> </li> <li class="navigation-item"> <a class="navigation-link" href="#">Contact</a> </li> </ul> <ul class="navigation-menu"> <li class="navigation-item navigation-icon-item"> <a class="navigation-link" href="#"> <i class="fas fa-shopping-cart"></i> <span>Cart</span> </a> </li> <li class="navigation-item navigation-icon-item"> <a class="navigation-link" href="#"> <i class="fas fa-search"></i> <span>Search</span> </a> </li> </ul> </div> </nav>
Dependences
<link href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" rel="stylesheet">
HTML
<nav id="navigation" class="navigation navigation-justified"> <div class="navigation-header"> <div class="navigation-logo"> <a href="#"> <img src="img/logo.png" alt="logo"> </a> </div> <div class="navigation-button-toggler"> <i class="hamburger-icon"></i> </div> </div> <div class="navigation-body"> <div class="navigation-body-header"> <div class="navigation-logo"> <a href="#"> <img src="img/logo.png" alt="logo"> </a> </div> <span class="navigation-body-close-button">✕</span> </div> <ul class="navigation-menu"> <li class="navigation-item navigation-icon-item"> <a class="navigation-link" href="#"> <i class="fas fa-home"></i> <span>Home</span> </a> </li> <li class="navigation-item navigation-icon-item"> <a class="navigation-link" href="#"> <i class="fas fa-cog"></i> <span>Settings</span> </a> </li> <li class="navigation-item navigation-icon-item"> <a class="navigation-link" href="#"> <i class="fas fa-envelope"></i> <span>Messages</span> </a> </li> <li class="navigation-item navigation-icon-item"> <a class="navigation-link" href="#"> <i class="fas fa-search"></i> <span>Search</span> </a> </li> </ul> </div> </nav>
Dependences
<link href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" rel="stylesheet">
HTML
<nav id="navigation" class="navigation"> <div class="navigation-header"> <div class="navigation-logo"> <a href="#"> <img src="img/logo.png" alt="logo"> </a> </div> <div class="navigation-button-toggler"> <i class="hamburger-icon"></i> </div> </div> <div class="navigation-body"> <div class="navigation-body-header align-to-left"> <div class="navigation-logo"> <a href="#"> <img src="img/logo.png" alt="logo"> </a> </div> <span class="navigation-body-close-button">✕</span> </div> <div class="navigation-body-section"> <form class="navigation-inline-form"> <input class="navigation-input" type="search" name="search" placeholder="Search"> <button type="submit" class="navigation-btn"> <i class="navigation-search-icon"></i> </button> </form> </div> <ul class="navigation-menu"> <li class="navigation-item navigation-icon-item"> <a class="navigation-link" href="#"> <i class="fas fa-home"></i> <span>Home</span> </a> </li> <li class="navigation-item navigation-icon-item"> <a class="navigation-link" href="#"> <i class="fas fa-cog"></i> <span>Settings</span> </a> </li> <li class="navigation-item navigation-icon-item"> <a class="navigation-link" href="#"> <i class="fas fa-envelope"></i> <span>Messages</span> </a> </li> </ul> </div> </nav>
Dependences
<link href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" rel="stylesheet">
HTML
<nav id="navigation" class="navigation"> <div class="navigation-header"> <div class="navigation-logo"> <a href="#"> <img src="img/logo.png" alt="logo"> </a> </div> <div class="navigation-button-toggler"> <i class="hamburger-icon"></i> </div> </div> <div class="navigation-body"> <div class="navigation-body-header"> <div class="navigation-logo"> <a href="#"> <img src="img/logo.png" alt="logo"> </a> </div> <span class="navigation-body-close-button">✕</span> </div> <ul class="navigation-menu"> <li class="navigation-item is-active"> <a class="navigation-link" href="#"> <i class="fas fa-home"></i> <span>Home</span> </a> </li> <li class="navigation-item"> <a class="navigation-link" href="#"> <i class="fas fa-cog"></i> <span>Services</span> </a> </li> <li class="navigation-item"> <a class="navigation-link" href="#"> <i class="fas fa-cog"></i> <span>Blog</span> </a> </li> <li class="navigation-item"> <a class="navigation-link" href="#"> <i class="fas fa-envelope"></i> <span>Messages</span> </a> </li> </ul> </div> </nav>
Dependences
<link href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" rel="stylesheet">
HTML
<nav id="navigation" class="navigation navigation-justified"> <div class="navigation-header"> <div class="navigation-logo"> <a href="#"> <img src="img/logo.png" alt="logo"> </a> </div> <div class="navigation-button-toggler"> <i class="hamburger-icon"></i> </div> </div> <div class="navigation-body"> <div class="navigation-body-header"> <div class="navigation-logo"> <a href="#"> <img src="img/logo.png" alt="logo"> </a> </div> <span class="navigation-body-close-button">✕</span> </div> <ul class="navigation-menu"> <li class="navigation-item is-active"> <a class="navigation-link" href="#"> <i class="fas fa-home"></i> <span>Home</span> </a> </li> <li class="navigation-item"> <a class="navigation-link" href="#"> <i class="fas fa-cog"></i> <span>Services</span> </a> </li> <li class="navigation-item"> <a class="navigation-link" href="#"> <i class="fas fa-cog"></i> <span>Blog</span> </a> </li> <li class="navigation-item"> <a class="navigation-link" href="#"> <i class="fas fa-envelope"></i> <span>Messages</span> </a> </li> </ul> </div> </nav>
Dependences
<link href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" rel="stylesheet">
HTML
<nav id="navigation" class="navigation navigation-justified"> <div class="navigation-header"> <div class="navigation-logo"> <a href="#"> <img src="img/logo.png" alt="logo"> </a> </div> <div class="navigation-button-toggler"> <i class="hamburger-icon"></i> </div> </div> <div class="navigation-body"> <div class="navigation-body-header"> <div class="navigation-logo"> <a href="#"> <img src="img/logo.png" alt="logo"> </a> </div> <span class="navigation-body-close-button">✕</span> </div> <ul class="navigation-menu"> <li class="navigation-item is-active"> <a class="navigation-link" href="#"> <i class="fas fa-home"></i> <span>Home</span> </a> </li> <li class="navigation-item"> <a class="navigation-link" href="#"> <i class="fas fa-cog"></i> <span>Services</span> </a> </li> <li class="navigation-item"> <a class="navigation-link" href="#"> <i class="fas fa-cog"></i> <span>Blog</span> </a> </li> <li class="navigation-item"> <a class="navigation-link" href="#"> <i class="fas fa-envelope"></i> <span>Messages</span> </a> </li> </ul> <ul class="navigation-menu"> <li class="navigation-item navigation-icon-item"> <a class="navigation-link" href="#"> <i class="fas fa-search"></i> <span>Search</span> </a> </li> </ul> </div> </nav>
Dependences
<link href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" rel="stylesheet">
HTML
<nav id="navigation" class="navigation navigation-justified"> <div class="navigation-header"> <div class="navigation-logo"> <a href="#"> <img src="img/logo.png" alt="logo"> </a> </div> <div class="navigation-button-toggler"> <i class="hamburger-icon"></i> </div> </div> <div class="navigation-body"> <div class="navigation-body-header"> <div class="navigation-logo"> <a href="#"> <img src="img/logo.png" alt="logo"> </a> </div> <span class="navigation-body-close-button">✕</span> </div> <ul class="navigation-menu"> <li class="navigation-item is-active"> <a class="navigation-link" href="#"> <i class="fas fa-home"></i> <span>Home</span> </a> </li> <li class="navigation-item"> <a class="navigation-link" href="#"> <i class="fas fa-cog"></i> <span>Services</span> </a> </li> <li class="navigation-item"> <a class="navigation-link" href="#"> <i class="fas fa-cog"></i> <span>Blog</span> </a> </li> <li class="navigation-item"> <a class="navigation-link" href="#"> <i class="fas fa-envelope"></i> <span>Messages</span> </a> </li> </ul> <div class="navigation-body-section"> <a class="navigation-btn" href="#">Button</a> </div> </div> </nav>
Dependences
<link href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" rel="stylesheet">
HTML
<nav id="navigation" class="navigation navigation-justified"> <div class="navigation-header"> <div class="navigation-logo"> <a href="#"> <img src="img/logo.png" alt="logo"> </a> </div> <div class="navigation-button-toggler"> <i class="hamburger-icon"></i> </div> </div> <div class="navigation-body"> <div class="navigation-body-header"> <div class="navigation-logo"> <a href="#"> <img src="img/logo.png" alt="logo"> </a> </div> <span class="navigation-body-close-button">✕</span> </div> <ul class="navigation-menu"> <li class="navigation-item is-active"> <a class="navigation-link" href="#"> <i class="fas fa-home"></i> <span>Home</span> </a> </li> <li class="navigation-item"> <a class="navigation-link" href="#"> <i class="fas fa-cog"></i> <span>Services</span> </a> </li> <li class="navigation-item"> <a class="navigation-link" href="#"> <i class="fas fa-cog"></i> <span>Blog</span> </a> </li> <li class="navigation-item"> <a class="navigation-link" href="#"> <i class="fas fa-envelope"></i> <span>Messages</span> </a> </li> </ul> <div class="navigation-body-section"> <form class="navigation-inline-form"> <input class="navigation-input" type="search" name="search" placeholder="Search"> <button type="submit" class="navigation-btn"> <i class="navigation-search-icon"></i> </button> </form> </div> </div> </nav>
Dependences
<link href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" rel="stylesheet">
HTML
<nav id="navigation" class="navigation navigation-justified"> <div class="navigation-header"> <div class="navigation-logo"> <a href="#"> <img src="img/logo.png" alt="logo"> </a> </div> <div class="navigation-button-toggler"> <i class="hamburger-icon"></i> </div> </div> <div class="navigation-body"> <div class="navigation-body-header"> <div class="navigation-logo"> <a href="#"> <img src="img/logo.png" alt="logo"> </a> </div> <span class="navigation-body-close-button">✕</span> </div> <ul class="navigation-menu"> <li class="navigation-item is-active"> <a class="navigation-link" href="#"> <i class="fas fa-home"></i> <span>Home</span> </a> </li> <li class="navigation-item"> <a class="navigation-link" href="#"> <i class="fas fa-cog"></i> <span>Services</span> </a> </li> <li class="navigation-item"> <a class="navigation-link" href="#"> <i class="fas fa-cog"></i> <span>Blog</span> </a> </li> <li class="navigation-item"> <a class="navigation-link" href="#"> <i class="fas fa-envelope"></i> <span>Messages</span> </a> </li> </ul> <ul class="navigation-menu navigation-social-menu margin-top"> <li class="navigation-item"> <a class="navigation-link" href="#"> <i class="fab fa-facebook-f"></i> </a> </li> <li class="navigation-item"> <a class="navigation-link" href="#"> <i class="fab fa-twitter"></i> </a> </li> <li class="navigation-item"> <a class="navigation-link" href="#"> <i class="fab fa-instagram"></i> </a> </li> </ul> </div> </nav>
Dependences
<link href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" rel="stylesheet">
HTML
<nav id="navigation" class="navigation navigation-justified"> <div class="navigation-header"> <div class="navigation-brand-text"> <a href="#">NAVBAR</a> </div> <div class="navigation-button-toggler"> <i class="hamburger-icon"></i> </div> </div> <div class="navigation-body"> <div class="navigation-body-header align-to-left"> <div class="navigation-brand-text"> <a href="#">NAVBAR</a> </div> <span class="navigation-body-close-button">✕</span> </div> <div class="navigation-body-section"> <span class="navigation-text">Tel.: 123 456 7890</span> </div> <div class="navigation-body-section"> <form class="navigation-inline-form"> <input class="navigation-input" type="search" name="search" placeholder="Search"> <button type="submit" class="navigation-btn"> <i class="navigation-search-icon"></i> </button> </form> </div> <ul class="navigation-menu"> <li class="navigation-item"> <a class="navigation-link" href="#"> <i class="fas fa-sign-in-alt"></i> <span>Sign in</span> </a> </li> <li class="navigation-item"> <a class="navigation-link" href="#"> <i class="fas fa-shopping-cart"></i> <span>Cart</span> </a> </li> </ul> </div> </nav>
Dependences
<link href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" rel="stylesheet">
HTML
<nav id="navigation" class="navigation"> <div class="navigation-header"> <div class="navigation-brand-text"> <a href="#">NAVBAR</a> </div> <div class="navigation-button-toggler"> <i class="hamburger-icon"></i> </div> </div> <div class="navigation-body"> <div class="navigation-body-header"> <div class="navigation-brand-text"> <a href="#">NAVBAR</a> </div> <span class="navigation-body-close-button">✕</span> </div> <ul class="navigation-menu align-to-left"> <li class="navigation-item is-active"> <a class="navigation-link" href="#">Home</a> </li> <li class="navigation-item"> <a class="navigation-link" href="#">Services</a> </li> <li class="navigation-item"> <a class="navigation-link" href="#">Blog</a> </li> <li class="navigation-item"> <a class="navigation-link" href="#">Contact</a> </li> </ul> <ul class="navigation-menu"> <li class="navigation-item"> <a class="navigation-link" href="#"> <i class="fas fa-sign-in-alt"></i> <span>Sign in</span> </a> </li> <li class="navigation-item"> <a class="navigation-link" href="#"> <i class="fas fa-shopping-cart"></i> <span>Cart</span> </a> </li> </ul> </div> </nav>
Dependences
<link href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" rel="stylesheet">
HTML
<nav id="navigation" class="navigation navigation-justified"> <div class="navigation-header"> <div class="navigation-brand-text"> <a href="#">NAVBAR</a> </div> <div class="navigation-button-toggler"> <i class="hamburger-icon"></i> </div> </div> <div class="navigation-body"> <div class="navigation-body-header"> <div class="navigation-brand-text"> <a href="#">NAVBAR</a> </div> <span class="navigation-body-close-button">✕</span> </div> <ul class="navigation-menu"> <li class="navigation-item is-active"> <a class="navigation-link" href="#">Home</a> </li> <li class="navigation-item"> <a class="navigation-link" href="#">Services</a> </li> <li class="navigation-item"> <a class="navigation-link" href="#">Blog</a> </li> <li class="navigation-item"> <a class="navigation-link" href="#">Contact</a> </li> </ul> <ul class="navigation-menu"> <li class="navigation-item"> <a class="navigation-link" href="#"> <i class="fas fa-sign-in-alt"></i> <span>Sign in</span> </a> </li> <li class="navigation-item"> <a class="navigation-link" href="#"> <i class="fas fa-shopping-cart"></i> <span>Cart</span> </a> </li> </ul> </div> </nav>
Dependences
<link href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" rel="stylesheet">
HTML
<nav id="navigation" class="navigation"> <div class="navigation-header"> <div class="navigation-logo"> <a href="#"> <img src="img/logo.png" alt="logo"> </a> </div> <div class="navigation-button-toggler"> <i class="hamburger-icon"></i> </div> </div> <div class="navigation-body"> <div class="navigation-body-header"> <div class="navigation-logo"> <a href="#"> <img src="img/logo.png" alt="logo"> </a> </div> <span class="navigation-body-close-button">✕</span> </div> <ul class="navigation-menu"> <li class="navigation-item is-active"> <a class="navigation-link" href="#">Home</a> </li> <li class="navigation-item"> <a class="navigation-link" href="#">Services</a> </li> <li class="navigation-item"> <a class="navigation-link" href="#">Blog</a> </li> <li class="navigation-item"> <a class="navigation-link" href="#">Contact</a> </li> </ul> <ul class="navigation-menu align-to-right"> <li class="navigation-item"> <a class="navigation-link" href="#"> <i class="fas fa-bars"></i> <span class="hide-on-landscape">Menu</span> </a> </li> </ul> </div> </nav>
Dependences
<link href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" rel="stylesheet">
HTML
<nav id="navigation" class="navigation navigation-justified"> <div class="navigation-header"> <div class="navigation-logo"> <a href="#"> <img src="img/logo.png" alt="logo"> </a> </div> <div class="navigation-button-toggler"> <i class="hamburger-icon"></i> </div> </div> <div class="navigation-body"> <div class="navigation-body-header"> <div class="navigation-logo"> <a href="#"> <img src="img/logo.png" alt="logo"> </a> </div> <span class="navigation-body-close-button">✕</span> </div> <ul class="navigation-menu"> <li class="navigation-item is-active"> <a class="navigation-link" href="#">Home</a> </li> <li class="navigation-item"> <a class="navigation-link" href="#">Services</a> </li> <li class="navigation-item"> <a class="navigation-link" href="#">Blog</a> </li> <li class="navigation-item"> <a class="navigation-link" href="#">Contact</a> </li> </ul> <ul class="navigation-menu"> <li class="navigation-item"> <a class="navigation-link" href="#"> <i class="fas fa-bars"></i> <span class="hide-on-landscape">Menu</span> </a> </li> </ul> </div> </nav>
Dependences
<link href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" rel="stylesheet">
HTML
<nav id="navigation" class="navigation"> <div class="navigation-header"> <div class="navigation-logo"> <a href="#"> <img src="img/logo.png" alt="logo"> </a> </div> <div class="navigation-button-toggler"> <i class="hamburger-icon"></i> </div> </div> <div class="navigation-body"> <div class="navigation-body-header"> <div class="navigation-logo"> <a href="#"> <img src="img/logo.png" alt="logo"> </a> </div> <span class="navigation-body-close-button">✕</span> </div> <ul class="navigation-menu align-to-right"> <li class="navigation-item is-active"> <a class="navigation-link" href="#">Home</a> </li> <li class="navigation-item"> <a class="navigation-link" href="#">Services</a> </li> <li class="navigation-item"> <a class="navigation-link" href="#">Blog</a> </li> <li class="navigation-item"> <a class="navigation-link" href="#">Contact</a> </li> </ul> <ul class="navigation-menu"> <li class="navigation-item"> <a class="navigation-link" href="#"> <i class="fas fa-user"></i> <span class="hide-on-landscape">Log in</span> </a> </li> <li class="navigation-item"> <a class="navigation-link" href="#"> <i class="fas fa-shopping-cart"></i> <span class="hide-on-landscape">Cart</span> </a> </li> <li class="navigation-item"> <a class="navigation-link" href="#"> <i class="fas fa-search"></i> <span class="hide-on-landscape">Search</span> </a> </li> </ul> </div> </nav>
Dependences
<link href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" rel="stylesheet">
HTML
<nav id="navigation" class="navigation"> <div class="navigation-header"> <div class="navigation-brand-text"> <a href="#">NAVBAR</a> </div> <div class="navigation-button-toggler"> <i class="hamburger-icon"></i> </div> </div> <div class="navigation-body scroll-momentum"> <div class="navigation-body-header"> <div class="navigation-brand-text"> <a href="#">NAVBAR</a> </div> <span class="navigation-body-close-button">✕</span> </div> <ul class="navigation-menu"> <li class="navigation-item"> <a class="navigation-link" href="#"> <i class="fas fa-search"></i> <span class="hide-on-landscape">Search</span> </a> </li> <li class="navigation-item is-active"> <a class="navigation-link" href="#">Home</a> </li> <li class="navigation-item"> <a class="navigation-link" href="#">Services</a> </li> <li class="navigation-item"> <a class="navigation-link" href="#">Blog</a> </li> <li class="navigation-item"> <a class="navigation-link" href="#">Contact</a> </li> </ul> <ul class="navigation-menu align-to-right"> <li class="navigation-item"> <a class="navigation-link" href="#"> <i class="fas fa-user"></i> <span class="hide-on-landscape">Sign in</span> </a> </li> <li class="navigation-item"> <a class="navigation-link" href="#"> <i class="fas fa-shopping-cart"></i> <span class="hide-on-landscape">Cart</span> </a> </li> </ul> </div> </nav>
HTML
<nav id="navigation" class="navigation navigation-logo-top"> <div class="navigation-header"> <div class="navigation-brand-text"> <a href="#">NAVBAR</a> </div> <div class="navigation-button-toggler"> <i class="hamburger-icon"></i> </div> </div> <div class="navigation-body"> <div class="navigation-body-header"> <div class="navigation-brand-text"> <a href="#">NAVBAR</a> </div> <span class="navigation-body-close-button">✕</span> </div> <ul class="navigation-menu"> <li class="navigation-item is-active"> <a class="navigation-link" href="#">Home</a> </li> <li class="navigation-item"> <a class="navigation-link" href="#">Services</a> </li> <li class="navigation-item"> <a class="navigation-link" href="#">Blog</a> </li> <li class="navigation-item"> <a class="navigation-link" href="#">Contact</a> </li> </ul> </div> </nav>
HTML
<nav id="navigation" class="navigation navigation-logo-top"> <div class="navigation-header"> <div class="navigation-logo"> <a href="#"> <img src="img/logo.png" alt="logo"> </a> </div> <div class="navigation-button-toggler"> <i class="hamburger-icon"></i> </div> </div> <div class="navigation-body"> <div class="navigation-body-header"> <div class="navigation-logo"> <a href="#"> <img src="img/logo.png" alt="logo"> </a> </div> <span class="navigation-body-close-button">✕</span> </div> <ul class="navigation-menu"> <li class="navigation-item is-active"> <a class="navigation-link" href="#">Home</a> </li> <li class="navigation-item"> <a class="navigation-link" href="#">Services</a> </li> <li class="navigation-item"> <a class="navigation-link" href="#">Blog</a> </li> <li class="navigation-item"> <a class="navigation-link" href="#">Contact</a> </li> </ul> </div> </nav>
Dependences
<link href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" rel="stylesheet">
HTML
<nav id="navigation" class="navigation navigation-logo-top"> <div class="navigation-header"> <div class="navigation-logo"> <a href="#"> <img src="img/logo.png" alt="logo"> </a> </div> <div class="navigation-button-toggler"> <i class="hamburger-icon"></i> </div> </div> <div class="navigation-body"> <div class="navigation-body-header"> <div class="navigation-logo"> <a href="#"> <img src="img/logo.png" alt="logo"> </a> </div> <span class="navigation-body-close-button">✕</span> </div> <ul class="navigation-menu"> <li class="navigation-item is-active"> <a class="navigation-link" href="#">Home</a> </li> <li class="navigation-item"> <a class="navigation-link" href="#">Services</a> </li> <li class="navigation-item"> <a class="navigation-link" href="#">Blog</a> </li> <li class="navigation-item"> <a class="navigation-link" href="#">Contact</a> </li> <li class="navigation-item"> <a class="navigation-link" href="#"> <i class="fas fa-search"></i> <span class="hide-on-landscape">Search</span> </a> </li> </ul> </div> </nav>
HTML
<nav id="navigation" class="navigation navigation-centered"> <div class="navigation-header"> <div class="navigation-logo"> <a href="#"> <img src="img/logo.png" alt="logo"> </a> </div> <div class="navigation-button-toggler"> <i class="hamburger-icon"></i> </div> </div> <div class="navigation-body"> <div class="navigation-body-header"> <div class="navigation-logo hide-on-landscape"> <a href="#"> <img src="img/logo.png" alt="logo"> </a> </div> <span class="navigation-body-close-button">✕</span> </div> <ul class="navigation-menu"> <li class="navigation-item is-active"> <a class="navigation-link" href="#">Home</a> </li> <li class="navigation-item"> <a class="navigation-link" href="#">Services</a> </li> <li class="navigation-item navigation-logo"> <a class="navigation-link hide-on-portrait" href="#"> <img src="img/logo.png" alt="logo"> </a> </li> <li class="navigation-item"> <a class="navigation-link" href="#">Blog</a> </li> <li class="navigation-item"> <a class="navigation-link" href="#">Contact</a> </li> </ul> </div> </nav>
HTML
<nav id="navigation" class="navigation navigation-justified"> <div class="navigation-header"> <div class="navigation-logo"> <a href="#"> <img src="img/logo.png" alt="logo"> </a> </div> <div class="navigation-button-toggler"> <i class="hamburger-icon"></i> </div> </div> <div class="navigation-body"> <div class="navigation-body-header hide-on-landscape"> <div class="navigation-logo"> <a href="#"> <img src="img/logo.png" alt="logo"> </a> </div> <span class="navigation-body-close-button">✕</span> </div> <ul class="navigation-menu"> <li class="navigation-item is-active"> <a class="navigation-link" href="#">Home</a> </li> <li class="navigation-item"> <a class="navigation-link" href="#">Services</a> </li> <li class="navigation-item"> <a class="navigation-link" href="#">Portfolio</a> </li> </ul> <ul class="navigation-menu"> <li class="navigation-item navigation-logo"> <a class="navigation-link hide-on-portrait" href="#"> <img src="img/logo.png" alt="logo"> </a> </li> </ul> <ul class="navigation-menu"> <li class="navigation-item"> <a class="navigation-link" href="#">About us</a> </li> <li class="navigation-item"> <a class="navigation-link" href="#">Blog</a> </li> <li class="navigation-item"> <a class="navigation-link" href="#">Contact</a> </li> </ul> </div> </nav>
Dependences
<link href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" rel="stylesheet">
HTML
<nav id="navigation" class="navigation navigation-justified"> <div class="navigation-header"> <div class="navigation-logo"> <a href="#"> <img src="img/logo.png" alt="logo"> </a> </div> <div class="navigation-button-toggler"> <i class="hamburger-icon"></i> </div> </div> <div class="navigation-body"> <div class="navigation-body-header hide-on-landscape"> <div class="navigation-logo"> <a href="#"> <img src="img/logo.png" alt="logo"> </a> </div> <span class="navigation-body-close-button">✕</span> </div> <ul class="navigation-menu"> <li class="navigation-item is-active"> <a class="navigation-link" href="#">Home</a> </li> <li class="navigation-item"> <a class="navigation-link" href="#">About</a> </li> <li class="navigation-item"> <a class="navigation-link" href="#">Blog</a> </li> </ul> <ul class="navigation-menu"> <li class="navigation-item navigation-logo"> <a class="navigation-link hide-on-portrait" href="#"> <img src="img/logo.png" alt="logo"> </a> </li> </ul> <ul class="navigation-menu"> <li class="navigation-item"> <a class="navigation-link" href="#">Sign in</a> </li> <li class="navigation-item"> <a class="navigation-link" href="#"> <i class="fas fa-shopping-cart"></i> <span class="hide-on-landscape">Cart</span> </a> </li> <li class="navigation-item"> <a class="navigation-link" href="#"> <i class="fas fa-search"></i> <span class="hide-on-landscape">Search</span> </a> </li> </ul> </div> </nav>
Dependences
<link href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" rel="stylesheet">
HTML
<nav id="navigation" class="navigation navigation-justified"> <div class="navigation-header"> <div class="navigation-logo"> <a href="#"> <img src="img/logo.png" alt="logo"> </a> </div> <div class="navigation-button-toggler"> <i class="hamburger-icon"></i> </div> </div> <div class="navigation-body"> <div class="navigation-body-header hide-on-landscape"> <div class="navigation-logo"> <a href="#"> <img src="img/logo.png" alt="logo"> </a> </div> <span class="navigation-body-close-button">✕</span> </div> <ul class="navigation-menu"> <li class="navigation-item is-active"> <a class="navigation-link" href="#">Home</a> </li> <li class="navigation-item"> <a class="navigation-link" href="#">Services</a> </li> <li class="navigation-item"> <a class="navigation-link" href="#">Team</a> </li> </ul> <ul class="navigation-menu"> <li class="navigation-item navigation-logo"> <a class="navigation-link hide-on-portrait" href="#"> <img src="img/logo.png" alt="logo"> </a> </li> </ul> <ul class="navigation-menu"> <li class="navigation-item"> <a class="navigation-link" href="#">Sign in</a> </li> <li class="navigation-item navigation-icon-item"> <a class="navigation-link" href="#"> <i class="fas fa-shopping-cart"></i> <span>Cart</span> </a> </li> <li class="navigation-item navigation-icon-item"> <a class="navigation-link" href="#"> <i class="fas fa-search"></i> <span>Search</span> </a> </li> </ul> </div> </nav>
HTML
<nav id="navigation" class="navigation navigation-justified"> <div class="navigation-header"> <div class="navigation-logo"> <a href="#"> <img src="img/logo.png" alt="logo"> </a> </div> <div class="navigation-button-toggler"> <i class="hamburger-icon"></i> </div> </div> <div class="navigation-body"> <div class="navigation-body-header hide-on-landscape"> <div class="navigation-logo"> <a href="#"> <img src="img/logo.png" alt="logo"> </a> </div> <span class="navigation-body-close-button">✕</span> </div> <ul class="navigation-menu"> <li class="navigation-item is-active"> <a class="navigation-link" href="#">Home</a> </li> <li class="navigation-item"> <a class="navigation-link" href="#">Services</a> </li> <li class="navigation-item"> <a class="navigation-link" href="#">Portfolio</a> </li> </ul> <ul class="navigation-menu"> <li class="navigation-item navigation-brand-text"> <a class="navigation-link hide-on-portrait" href="#"> NAVBAR </a> </li> </ul> <ul class="navigation-menu"> <li class="navigation-item"> <a class="navigation-link" href="#">About us</a> </li> <li class="navigation-item"> <a class="navigation-link" href="#">Blog</a> </li> <li class="navigation-item"> <a class="navigation-link" href="#">Contact</a> </li> </ul> </div> </nav>
Dependences
<link href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" rel="stylesheet">
HTML
<nav id="navigation" class="navigation navigation-justified"> <div class="navigation-header"> <div class="navigation-logo"> <a href="#"> <img src="img/logo.png" alt="logo"> </a> </div> <div class="navigation-button-toggler"> <i class="hamburger-icon"></i> </div> </div> <div class="navigation-body"> <div class="navigation-body-header hide-on-landscape"> <div class="navigation-logo"> <a href="#"> <img src="img/logo.png" alt="logo"> </a> </div> <span class="navigation-body-close-button">✕</span> </div> <ul class="navigation-menu"> <li class="navigation-item is-active"> <a class="navigation-link" href="#">Home</a> </li> <li class="navigation-item"> <a class="navigation-link" href="#">About</a> </li> <li class="navigation-item"> <a class="navigation-link" href="#">Blog</a> </li> </ul> <ul class="navigation-menu"> <li class="navigation-item navigation-brand-text"> <a class="navigation-link hide-on-portrait" href="#"> NAVBAR </a> </li> </ul> <ul class="navigation-menu"> <li class="navigation-item"> <a class="navigation-link" href="#">Sign in</a> </li> <li class="navigation-item"> <a class="navigation-link" href="#"> <i class="fas fa-shopping-cart"></i> <span class="hide-on-landscape">Cart</span> </a> </li> <li class="navigation-item"> <a class="navigation-link" href="#"> <i class="fas fa-search"></i> <span class="hide-on-landscape">Search</span> </a> </li> </ul> </div> </nav>
Dependences
<link href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" rel="stylesheet">
HTML
<nav id="navigation" class="navigation navigation-justified"> <div class="navigation-header"> <div class="navigation-logo"> <a href="#"> <img src="img/logo.png" alt="logo"> </a> </div> <div class="navigation-button-toggler"> <i class="hamburger-icon"></i> </div> </div> <div class="navigation-body"> <div class="navigation-body-header hide-on-landscape"> <div class="navigation-logo"> <a href="#"> <img src="img/logo.png" alt="logo"> </a> </div> <span class="navigation-body-close-button">✕</span> </div> <ul class="navigation-menu"> <li class="navigation-item navigation-icon-item hide-on-portrait"> <a class="navigation-link" href="#"> <i class="fas fa-bars"></i> <span>Menu</span> </a> </li> <li class="navigation-item"> <a class="navigation-link" href="#">Catalog</a> </li> </ul> <ul class="navigation-menu"> <li class="navigation-item navigation-brand-text"> <a class="navigation-link hide-on-portrait" href="#"> NAVBAR </a> </li> </ul> <ul class="navigation-menu"> <li class="navigation-item navigation-icon-item"> <a class="navigation-link" href="#"> <i class="fas fa-shopping-cart"></i> <span>Cart</span> </a> </li> <li class="navigation-item navigation-icon-item"> <a class="navigation-link" href="#"> <i class="fas fa-search"></i> <span>Search</span> </a> </li> </ul> </div> </nav>
HTML
<nav id="navigation" class="navigation navigation-justified"> <div class="navigation-header"> <div class="navigation-logo"> <a href="#"> <img src="img/logo.png" alt="logo"> </a> </div> <div class="navigation-button-toggler"> <i class="hamburger-icon"></i> </div> </div> <div class="navigation-body"> <div class="navigation-body-header"> <div class="navigation-logo"> <a href="#"> <img src="img/logo.png" alt="logo"> </a> </div> <span class="navigation-body-close-button">✕</span> </div> <ul class="navigation-menu"> <li class="navigation-item navigation-avatar-item hide-on-landscape"> <a class="navigation-link" href="#"> <img src="img/avatar.png" alt="logo"> <span>My account</span> </a> </li> <li class="navigation-item is-active"> <a class="navigation-link" href="#">Campaigns</a> </li> <li class="navigation-item"> <a class="navigation-link" href="#">Reports</a> </li> <li class="navigation-item"> <a class="navigation-link" href="#">Messages</a> </li> <li class="navigation-item navigation-avatar-item hide-on-portrait"> <a class="navigation-link" href="#"> <img src="img/avatar.png" alt="logo"> <span>My account</span> </a> </li> </ul> </div> </nav>
HTML
<nav id="navigation" class="navigation navigation-justified"> <div class="navigation-header"> <div class="navigation-logo"> <a href="#"> <img src="img/logo.png" alt="logo"> </a> </div> <div class="navigation-button-toggler"> <i class="hamburger-icon"></i> </div> </div> <div class="navigation-body"> <div class="navigation-body-header"> <div class="navigation-logo"> <a href="#"> <img src="img/logo.png" alt="logo"> </a> </div> <span class="navigation-body-close-button">✕</span> </div> <ul class="navigation-menu"> <li class="navigation-item navigation-avatar-item hide-on-landscape"> <a class="navigation-link" href="#"> <img src="img/avatar.png" alt="logo"> <span>My account</span> </a> </li> <li class="navigation-item"> <a class="navigation-link" href="#">Settings</a> </li> <li class="navigation-item"> <a class="navigation-link" href="#"> Messages <span class="navigation-badge">5</span> </a> </li> <li class="navigation-item navigation-avatar-item hide-on-portrait"> <a class="navigation-link" href="#"> <img src="img/avatar.png" alt="logo"> <span>My account</span> </a> </li> </ul> </div> </nav>
Dependences
<link href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" rel="stylesheet">
HTML
<nav id="navigation" class="navigation navigation-justified"> <div class="navigation-header"> <div class="navigation-logo"> <a href="#"> <img src="img/logo.png" alt="logo"> </a> </div> <div class="navigation-button-toggler"> <i class="hamburger-icon"></i> </div> </div> <div class="navigation-body"> <div class="navigation-body-header"> <div class="navigation-logo"> <a href="#"> <img src="img/logo.png" alt="logo"> </a> </div> <span class="navigation-body-close-button">✕</span> </div> <ul class="navigation-menu"> <li class="navigation-item navigation-avatar-item hide-on-landscape"> <a class="navigation-link" href="#"> <img src="img/avatar.png" alt="logo"> <span>My account</span> </a> </li> <li class="navigation-item"> <a class="navigation-link" href="#">Settings</a> </li> <li class="navigation-item"> <a class="navigation-link" href="#">Reports</a> </li> <li class="navigation-item"> <a class="navigation-link" href="#">Campaigns</a> </li> <li class="navigation-item"> <a class="navigation-link" href="#"> Messages <span class="navigation-badge">5</span> </a> </li> <li class="navigation-item navigation-avatar-item hide-on-portrait"> <a class="navigation-link" href="#"> <img src="img/avatar.png" alt="logo"> </a> </li> <li class="navigation-item"> <a class="navigation-link" href="#"> <i class="fas fa-cog"></i> <span class="hide-on-landscape">Settings</span> </a> </li> </ul> </div> </nav>