# Classic Menu

<figure><img src="https://1734026102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKXAimBJFhRJImV3lJL36%2Fuploads%2Fk8Ytvk3c67MNyClnBigI%2Fheader_01.jpg?alt=media&#x26;token=536e0791-f308-4abd-8f7f-582d15c461db" alt=""><figcaption></figcaption></figure>

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](http://wokiee.gitbook.io/docs/header/#tab-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.
