​
Contact us

Header & main navigation

Main navigation component

Example of main navigation with selected navigation item

HTML code snippet

<nav class="nav-main"> <ul> <li><a href="style-mainnav.html">Products</a></li> <li class="main-nav--selected"><a href="style-mainnav.html">Knowledge base</a></li> <li><a href="style-mainnav.html">Team</a></li> <li><a href="style-mainnav.html">Contact</a></li> </ul> </nav>

Editable main navigation

Header component

​

HTML code snippet

<div class="header-container"> <header class="header-main"> <a class="image-link" href=""> ​<picture> <source media="(max-width: 48em)" srcset="../img/logo.svg" type="image/svg+xml"> <source srcset="../img/logo-hor.svg" type="image/svg+xml"> <img src="../img/logo-hor.svg" alt=""> </picture> </a> <div> <a class="nav-main-contact button--small" href="contact.html">Contact us</a> </div> </header> </div>

Header template

​

HTML code snippet

<div class="header-container"> <header class="header-main"> <a class="image-link" href=""> ​<picture> <source media="(max-width: 48em)" srcset="../img/logo.svg" type="image/svg+xml"> <source srcset="../img/logo-hor.svg" type="image/svg+xml"> <img src="../img/logo-hor.svg" alt=""> </picture> </a> <div> <a class="nav-main-contact button--small" href="contact.html">Contact us</a> </div> </header> <nav class="nav-main"> <ul> <li><a href="style-mainnav.html">Products</a></li> <li class="main-nav--selected"><a href="style-mainnav.html">Knowledge base</a></li> <li><a href="style-mainnav.html">Team</a></li> <li><a href="style-mainnav.html">Contact</a></li> </ul> </nav> </div>