Header

This section contains the main header settings for the desktop version, along with additional options that become available when the transparent header is enabled.

Header – Options Overview

Option Group	Option / Setting	Explanation
TOP SPACING	Top spacing: 0–100px	Adjusts the vertical space above the header. Useful for creating more breathing room or aligning the header visually with page content.
TRANSPARENT HEADER	Note: Transparent header does not work correctly with tile-type and vertical menu-type headers. Avoid using this option with those header styles.	—
	Transparent header	Makes the header background transparent. Typically used on the homepage to overlay the header on top of a banner image for a clean, modern look.
	Works on the home page	Indicates that the transparent effect applies specifically to the homepage.
HEADER SHADOW	Enable shadow	Turns a shadow beneath the header on or off. Adds depth and visual separation from page content.
	Shadow	The main color and strength setting for the header shadow.
	Horizontal length: 0–10px	Sets how far the shadow spreads horizontally. Larger values shift the shadow left or right.
	Vertical length: 0–10px	Sets how far the shadow extends downward. Larger values create a more noticeable drop shadow.
	Blur radius: 0–20px	Controls how soft or sharp the shadow edges appear. Higher values make the shadow more diffused.
	Opacity: 0–100%	Adjusts how transparent or intense the shadow looks. Higher values make the shadow darker and more visible.

Transparent Header (Desktop)

• Enable the Transparent Header in Theme settings -> Header -> Transparent header

• When the Transparent Header is enabled, its logo, color and styling settings take priority over the standard header settings. So, add an Image in the field Image or use the Svg code.

Keep in mind that the logo used for the transparent header should be added here. If you don’t set a logo in this field, the theme will automatically use the main header logo.

Option Group	Option / Setting	Explanation
Logo	Image	Upload the main logo image used when the header is transparent.
	Svg code	Allows using an SVG logo instead of an uploaded image. The SVG must include defined width and height for correct display.
	Logo width	Adjusts how wide the logo appears in the transparent header.
Content (Menu & Text)	Content	Sets the text color of menu links and other text elements in the transparent header.
	Content hover	Sets the text color when hovering over menu links and other text items.
BOTTOM LINE	Line	Controls the color of the thin line at the bottom of the header (if used). Helps create visual separation from the page content.
COUNTER	Counter	Sets the icon or number color (for example, the number of items in the cart).
	Counter hover	Sets the icon or number color when hovered.
	Counter text	Sets the text color associated with counter elements (e.g., labels).
	Counter text hover	Sets the text color when hovered.
INPUT (Search Field Styling)	Background	Sets the background color of the search input field.
	Border	Sets the border color around the input field.
	Text	Sets the text color entered in the search field.
	Icon	Sets the color of the search icon inside the input field.
	Background hover	Sets the background color when the input is hovered.
	Border hover	Sets the border color when the input is hovered.
	Outline hover	Controls the outline or highlight that appears around the input when hovered or focused.
	Text hover	Sets the text color when the input is hovered.
	Icon hover	Sets the search icon color when hovering over the input.

Transparent header option won't work correctly with tile-type and vertical menu-type headers. Please don't use this option with these header types.

Transparent header works on the home page.

To achieve a smooth transition for your sticky header, use the same logo size as your main logo!!!