Hero Menu

The ThemeKit Hero Menu widget has a two column grid overlay with adjustable opacity. Column one has an <article> element with a heading and text and column two has the vertical navigation.
The hero has max height controls for both above and below the breakpoint.
Images
The image is inserted in three sizes for computer, mobile and phone in portrait mode. The images can be lazy loaded if required.
Heading
The heading has the option to switch to a gradient heading with a two or three color gradient and adjustable gradient angle.

Navigation

The naviagtion has an optional heading. It has a max height setting and any overflow will scroll.
The navigation has …

• Directional chevrons which inherit the text color
• Optional heading with font size control
• Controls for link font size, color, background, andtext align
• Background color hover animation
• Menu background color & opacity
• Link vertical spacing control
• Menu max height controls for above & below the breakpoint

Text

In the example the faux list items are created by inserting an HTML symbol before the text in each line.
Follow the link below to find HTML icons and entities …