Navigation

Kodhus library provides an extensive header styling and user experience.

Usage

The simplest menu you can create with a Logo and a top navigation is as follow:

          <div class="cdt-top-nav border">
  <div class="logo">
    <a href="#">Logo here</a>
    <span class="mobile-trigger">
      <span></span>
    </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>

Behaviour

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.

Sticky

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:

Item styles

Kodhus library provides 3 different styles for selected items and for when item is hovered.

Border line

You can choose to change the selected element and hover style of the navigation items in the top menu.

Highlight
Underline

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 .menu-right to .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 .menu-center.



Secondary navigation

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.

Themes

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.

Responsive

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.