Header

Header defines the main site headers layout behavior, design, position, and navigation styling, with scroll-aware colors and spacing. It supports layout choices and effects such as full-width, hide-on-scroll, and a glass background filter.

Make header full width

Enable to stretch the header across the full screen width.

Hide header on scroll down

Enable to hide the header when the visitor scrolls down.

Filter header background (Glass effect)

Enable a frosted-glass blur behind the header when it is transparent at the top.

Header design

Choose the header layout design: Default or Boxed.

Header position

Choose how the header is positioned: Fixed or Sticky.

Border radius

Sets the corner rounding of the header.

Background color

Sets the header background color.

Scroll background color

Sets the header background color once the page is scrolled.

Border color

Sets the header border color.

Scroll border color

Sets the header border color once the page is scrolled.

Links

Configures header link Color, Hover color, Toggles color, Toggles hover color, their on-scroll variants, Font weight, and Desktop/Tablet/Mobile groups.

Dropdowns

Styles header dropdown menus with a Links group, Background color, and Desktop/Tablet/Mobile groups.

Desktop

Sets the header Spacing and Spacing on scroll on desktop screens.

Tablet

Sets the header Spacing and Spacing on scroll on tablet screens.

Mobile

Sets the header Spacing and Spacing on scroll on mobile screens.