Closed Menu

The Closed Menu is a minimalist header design that keeps the main navigation hidden behind a menu (hamburger) icon, creating a clean and modern look.

When the menu icon is clicked, the full navigation panel expands, revealing all categories, links, and optional images or badges. This design maintains functionality while saving space in the header area.

Key features:

• Collapsible navigation hidden behind a menu icon

• Support for badges, menu images, and contact information

• Optional top bar for quick access links

• Clean and uncluttered design ideal for mobile-friendly or minimalist stores

Location: Header → Header Design → Closed Menu

The Closed Menu header design provides flexible settings to control the appearance, layout, and behavior of the header and navigation menu. It includes configuration options for logo placement, sticky behavior, color styling, backgrounds, user icons, and predictive search display.

---

Closed Menu — Options Overview

Category	Option	Values / Inputs	Description
Menu Layout	Width	Default, Boxed, Wide	Defines the header content width. The Wide option activates for screens 1440px and wider.
	Enable sticky header	None, Mobile, Desktop, All screens	Determines where the header remains fixed during scrolling.
	Mobile sticky header	On scroll up, Always	Controls how the sticky header behaves on mobile devices.
Desktop Logo	Image	Upload	Upload a logo image for desktop view.
	SVG code	Custom code	Allows adding an SVG logo instead of an image. The SVG must include width and height attributes.
	Logo width	40–250px	Adjusts the width of the desktop logo.
Mobile Logo	Image	Upload	Upload a logo image for mobile view.
	SVG code	Custom code	Allows using an SVG logo instead of an image.
	Logo width	30–150px	Adjusts the width of the mobile logo.
Desktop Header Design	Open menu	Button (admin only)	Works only in the admin panel for easier menu editing.
	Logo position	Left, Center	Sets the logo alignment inside the header.
	Search	Hide, Opened, Closed, Opened (sticky)	Defines how the search bar is displayed in the header.
	Text for icons	Hide, Show, Tooltip	Manages how labels or tooltips appear for header icons.
	Grid for menus	2–8	Determines how many items fit in a row within the menu grid.
	Menu font size	Big, small, Small, big	Sets the display size order for main and submenu text.
	Heading link size / Submenu link size	Adjustable	Defines the text sizing for headings and submenu links.
	Menu text alignment	Left, Center	Aligns text inside the menu container.
Bottom Line	Show top line	Checkbox	Enables a line above the bottom header section.
	Show bottom line	Checkbox	Enables a line below the bottom header section.
	Width	Fullwidth, Content width	Controls the width of the bottom header line section.
General Background	Width	Fullwidth, Content width	Defines whether the background spans the full screen or only the content area.
Main Header Background	Background	Hide, Color, Gradient, Image	Sets the header background type.
Colors (Desktop)	Base	Color picker	Defines main text and icon color.
	Accent	Color picker	Defines highlight color for active elements.
	Lines	Color picker	Sets line and border colors.
Menu Modal	Heading	Color picker	Sets color for modal headings.
	Heading hover	Color picker	Adjusts hover color for modal headings.
	Link	Color picker	Sets link color in the modal.
	Link hover	Color picker	Adjusts link hover color.
	Background	Color picker	Controls modal background color.
	Background overlay	Color picker	Defines overlay tint when the modal is open.
	Close button	Color picker	Controls color of the modal close button.
	Submenu shadow	Color picker	Adds shadow behind submenu panels.
User Icons	Icon	Color picker	Sets default icon color.
	Text	Color picker	Controls label text color for icons.
	Icon hover	Color picker	Defines hover color for icons.
	Text hover	Color picker	Defines hover color for labels.
	Counter / Counter hover	Color picker	Sets badge background for item counters (e.g., cart, wishlist).
	Counter text / Counter text hover	Color picker	Controls counter number text color.
Opened Search	Background / Border / Text / Icon	Color picker	Defines the color of search bar elements when active.
	Background hover / Border hover / Outline hover / Text hover / Icon hover	Color picker	Adjusts colors for interactive hover states in the search bar.
Predictive Search	Heading	Color picker	Defines heading color for predictive search results.
	Link / Link hover	Color picker	Sets link colors for suggested results.
	Product vendor	Color picker	Controls vendor name color.
	Product name / Product name hover	Color picker	Adjusts product name color in suggestions.
	Price / Sale price / Old price	Color picker	Defines colors for price styling, including discounts.
	Show all / Show hover	Color picker	Controls “Show all results” button color and hover state.
	Lines / Background / Shadow	Color picker	Customizes divider, background, and shadow styling for the predictive search panel.