Styling
Last updated
Last updated
In this section, we explore how to style your header to match your site’s design. Header styling options allow you to customize various aspects of the header, including colors, spacing, and alignment of header elements.
To customize the look and feel of header go to Appearance -> Customize -> Header -> Style (tab)
The first set of options pertains to the header container style. Here, you can customize the header’s background, border, padding, and bottom spacing.
Background Set the background color for the header container to define its overall appearance.
Border Customize the border around the header container, including its width, style, and color.
Padding Adjust the vertical padding inside the header container to control the space between the header’s edge and its content, affecting its internal layout.
Margin Bottom Modify the space below the header container to create distance between it and the content that follows, ensuring a clear separation on the page.
The default style and spacing for root-level menu links.
Links The colors for the normal, hover, and active states of the menu items.
Hamburger Menu Colors for each state of the toggle, it will inherit colors from Links by default.
Text Any text that is not a link inside the menu will be colored with this option.
Menu Item Spacing The spacing between root-level menu items.
Links The colors for the normal, hover, and active states of the menu items.
Background, Border, Padding, Radius and Shadow The style settings for the submenu container.
Provides an alternative styling option for header elements like menu items, buttons, and icons (e.g., Cart & Search) to achieve a pill-like appearance.
Pill Navigation Enable this option to style root-level menu items as buttons.
Background Sets the background color for the pill-style elements.
Color Determines the text color for the pill-style elements in three states: normal, hover, and active.
Padding Controls the space inside the pill-style elements, around the text.
Border Radius Defines the roundness of the corners for the pill-style elements.
An overlay menu that covers the entire screen, providing a full-page navigation experience.
Custom Background The background color and image options.
Links Colors for link states: normal, hover and active.
Text The color set here will be applied to text elements within the fullscreen menu.
The drawer like container with overlay.
Overlay The background that covers the entire screen behind the menu.
Background The background color of the menu container / drawer.
Links The color settings for the menu links in their different states: normal, hover, and active.
Text The color settings for other text elements within the menu container.
Pill Background The background color for pill-styled navigation items, applicable if pill navigation is enabled.
A menu type that pulls down from the top of the screen.
Background The background color of the menu container.
Links The color settings for the menu links in their different states: normal, hover, and active.
Text The color settings for other text elements within the menu container.
