Kodhus library provides an extensive header styling and user experience.
The simplest menu you can create with a Logo and a top navigation is as follow:
<header> <div class="cdt-top-nav border"> <div class="logo"> <a href="#">Logo here</a> <span class="mobile-trigger"> <span></span> </a> </span> </div> <div class="navigations menu-right"> <nav> <ul> <li><a href="#">Why Kodhus?</a></li> <li><a href="#">Prototypes</a></li> <li class="selected"><a href="#">About Us</a></li> <li><a href="#">Your team</a></li> </ul> </nav> </div> </div> </header>
By default, the nav bar will be relatively positioned and will get scrolled normally.
There are 2 other types that are common and kodhus provide both.
If you add
.sticky class to your top navigation, it will stick to the top of the page regardless of scrolling. You need to make sure that your top navigation is on the top level (within body) otherwise if it's within another element, it will be sticky within that element.
Take a look at an example:
Hide on Scroll
The other common behaviour is when you scroll down, the top navigation will hide by animating outside the view and will pop back in when you scroll up.
You need to add
.hide-ons-scroll class to your
.cdt-top-nav element. Take a look at the example:
Kodhus library provides 3 different styles for selected items and for when item is hovered.
You can choose to change the selected element and hover style of the navigation items in the top menu.
Navigation menu positioning
You can position the top menu to the left, center and right of the header.
By default the menu will be positioned to the left of the header by the logo as seen in the examples above.
To position the top menu to the right, you need to add
.cdt-top-nav element like follow:
<div class="cdt-top-nav border menu-right">
You can also position your menu in the center of the page by using
Kodhus supports secondary navigation. this navigation is not part of the main navigation flow which could also have mutiple navigations. Take a look at an example:
Note: In the case of a secondary navigation, when you use hide on scroll feature, secondary menu sticks to the top of the page.
By default, Kodhus top navigation has a light theme. If you need a dark theme, you just need to add the class
.dark to your
.cdt-top-nav. Here is an example:
In the case of dark theme, you need to make sure you add the
.dark class to both the
.cdt-top-nav and the
.navigations that you need to be using dark theme.
On the mobile phone, the menu becomes hidden and available through clicking the burge menu to the right of the header.
Menu will show up as an absolute positioned block under the header.
You can use the same underline, highlight and border classes to style the selected item in the menu.
Note: Depending on the size of the header, you need to set the top style of the element with class
.navigations the same as the header height.