This page documents the navigation item in HyperNav. Usually these items are links, but other times they may be used more like buttons.
The basic navigation item.
Basic With Icon
The basic navigation item with an icon. For a more unified UI, the icon width is fixed with a variable.
Basic With Auto Sized Icon
The basic navigation item with an auto sized icon. To break the fixed with of an icon use the auto size utility
.hn-size-auto. More about utilities.
Bold Displacement Fix
font-weight property affects layout dimensions, which can be problematic
if, for example, when an active navigation item should be displayed with bold text (not the default in HyperNav).
Read an article about the problem here.
In practice, the problem affects only those layouts that are of horizontal nature,
which means that the fix is often unnecessary for HyperNav side menus.
Regardless, to fix this in HyperNav you should give the element with class
.hn-content the attribute
data-hn-content, which should have the same value as the element itself.
Note: This is a subtle change and you need to inspect the element with dev tools to see the change. For example, compare the widths of the left (150px) and right (144px) items in this example.
The currently active navigation item should also have the class
will apply active styling.