Header Mobile

This section contains the main header settings for the mobile 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 space above the header. Useful for positioning the header higher or lower on the page.
TRANSPARENT HEADER	Note: Transparent header does not display correctly with tile-type or vertical menu-type headers. Avoid using it with those header styles.	—
	Transparent header	Enables a transparent background for the header.
	Works on the home page	Indicates that the transparent version is applied only to the homepage layout.
HEADER SHADOW	Enable shadow	Turns the header shadow effect on or off. Helps create depth and separation.
	Shadow	Selects the color or intensity style of the shadow.
	Horizontal length: 0–10px	Changes how far the shadow extends horizontally.
	Vertical length: 0–10px	Changes how far the shadow extends downward.
	Blur radius: 0–20px	Controls how soft or sharp the shadow edges appear. Higher values = softer shadow.
	Opacity: 0–100%	Adjusts how visible or strong the shadow appears. Higher values = darker shadow.
COLORS	Base	Sets the default text/icon color for items in the header.
	Accent	Sets the color for highlighted elements such as active links or hover states.
	Lines	Sets the color of dividing lines or separators in the header.
	Background	Sets the header background color (when not transparent).
MENU DRAWER	Background	Sets the background color of the slide-out menu drawer.
	Main menu	Sets the text color of main menu items in the drawer.
	Main menu icon	Sets the color of icons displayed alongside menu items.
	User icons	Sets the icon color for user-related actions (account, wishlist, etc.).
	Counter	Sets the icon counter color (e.g., number of items in cart).
	Counter text	Sets the text color of counter numbers or labels.
	Contacts content	Sets the text color for contact information inside the drawer.
	Heading	Sets the color of headings used inside the drawer.
	Icon	Sets the icon color for contact and support sections.
	Phone	Sets the color of displayed phone number text.
	Text	Sets the general text color inside the drawer.
	Social main	Sets the color of social media icons in the drawer.
	Contacts support chat link – Icon	Sets the icon color for the support chat/contact link.
	Contacts support chat link – Heading	Sets the heading text color for the support chat link.
	Contacts support chat link – Text	Sets the body text color for the support chat link.
Language, Currency selector	Background	Sets the background color of the selector field.
	Border	Sets the border color around the selector.
	Text	Sets the text color inside the selector.
	Icon	Sets the selector icon (arrow or symbol) color.
	Background hover	Sets the background color when hovering over the selector.
	Border hover	Sets the border color when hovered.
	Outline hover	Controls the highlight/outline when the selector is focused or hovered.
	Text hover	Sets the text color when hovered.
	Icon hover	Sets the icon color when hovered.
Language, Currency submenu	Link	Sets the color of each language/currency option in the submenu.
	Link active	Sets the color of the currently selected option.
	Background	Sets the submenu background color.
	Shadow	Controls the shadow around the submenu dropdown.

Transparent Header (Mobile)

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

• When the Transparent Header is enabled, its logo, color and styling settings take priority over the standard header mobile 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 mobile should be added here. If you don’t set a logo in this field, the theme will automatically use the main header mobile 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	Content	Sets the text color of menu links and other text elements in the transparent header.
COUNTER	Counter	Sets the icon or number color (for example, the number of items in the cart).
	Counter text	Sets the text color associated with counter elements (e.g., labels).

Menu drawer

You can also control the color scheme of the mobile menu drawer in the Header mobile section.