Classic Menu

The Classic Menu is a traditional and widely used header layout that features a horizontal navigation bar with clearly visible menu items. It provides a familiar browsing experience for customers.

This design typically includes the store logo, primary navigation links, and utility icons such as search, account, wishlist, and cart. It may also include contact information, a top bar, or badges for promotional highlights.

Key features:

• Horizontal main navigation with dropdown or megamenu support

• Option to display the logo, contact details, and social icons

• Clean and balanced design suitable for all store types

Location: Header → Header Design → Classic Menu

You can view an example of this menu type in the All Menus tab under Classic Menu.

---

Classic Menu — Options Overview

Category	Option / Setting	Available Values / Description
Menu	Menu	Replace, Edit, or Remove the current menu assigned to this section.
Layout	Width	Default, Boxed, Wide. The Wide option applies to screens 1440px and wider.
Sticky Header	Enable sticky header	None, Mobile, Desktop, All screens. Determines on which devices the header remains visible during scroll.
	Sticky header behavior	On scroll up, Always. Defines when the header becomes visible.
Desktop Logo	Image	Upload a logo image to display on desktop.
	SVG code	Add SVG markup instead of an image. The SVG must include width and height attributes.
	Logo width	40–250px. Controls the displayed width of the desktop logo.
Mobile Logo	Image	Upload a logo image to display on mobile devices.
	SVG code	Add SVG markup instead of an image. The SVG must include width and height attributes.
	Logo width	30–150px. Controls the displayed width of the mobile logo.
Desktop Header Design	Main menu font weight	Normal, Bold. Defines the font weight for desktop menu items.
	Logo position	Left, Center. Determines logo alignment in the header.
	Menu position	Left, Center, Right, Bottom left, Bottom center, Bottom left (variant). Controls where the main menu appears relative to the logo.
	Search	Hide, Opened, Closed. Sets the visibility state of the search bar.
	Text for icons	Hide, Show, Tooltip. Defines how text labels for icons are displayed.
Bottom Line	Show top line	Show or hide a divider line above the menu.
	Show bottom line	Show or hide a divider line below the menu.
	Width	Full width, Content width. Determines the width of the bottom line area.
General Background	Width	Full width, Content width. Defines the header’s total background width.
Main Header Background	Background	Hide, Color, Gradient, Image. Sets the main background style for the header.
Colors (Desktop)	Base	Base text or element color.
	Accent	Highlight or accent color for elements.
	Lines	Color used for divider lines and borders.
	Menu	Default menu text color.
	Menu hover	Color of menu text on hover.
Menu Submenu	Link	Default color for submenu links.
	Link hover	Hover color for submenu links.
	Background	Background color or image for the submenu area.
	Shadow	Enables or customizes the submenu drop shadow.
User Icons	Icon	Default icon color.
	Text	Default text color for user-related labels.
	Icon hover	Icon color when hovered.
	Text hover	Text color when hovered.
	Counter	Default background color for notification counters (e.g., cart count).
	Counter hover	Background color for counters on hover.
	Counter text	Text color of counters.
	Counter text hover	Text color of counters on hover.
Opened Search	Background	Background color when the search panel is open.
	Border	Border color of the opened search panel.
	Text	Text color in the search input field.
	Icon	Icon color inside the search field.
	Background hover	Hover background color for search elements.
	Border hover	Hover border color.
	Outline hover	Outline color when search elements are hovered or focused.
	Text hover	Text hover color in the search area.
	Icon hover	Icon hover color in the search area.
Predictive Search	Heading	Color of the predictive search heading text.
	Link	Default color for predictive search links.
	Link hover	Hover color for predictive search links.
	Product vendor	Text color for product vendor names in results.
	Product name	Default color for product names.
	Product name hover	Hover color for product names.
	Price	Default price color.
	Sale price	Color for sale prices.
	Old price	Color for original (crossed-out) prices.
	Show all	Text color for “Show all” link.
	Show hover	Hover color for “Show all” link.
	Lines	Divider or border line color in predictive search.
	Background	Background color of predictive search results.
	Shadow	Shadow effect for predictive search dropdown.

---

The Classic Menu section can be expanded with additional subsections: Badges, Contact Information, Mega Menu, and Top Bar, allowing for enhanced functionality and design flexibility.