# Closed Menu

<figure><img src="https://1734026102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKXAimBJFhRJImV3lJL36%2Fuploads%2FYtFYN1LsqMDyXIJ9MlE7%2Fheader_04.jpg?alt=media&#x26;token=9e473e85-7421-44b4-a065-c7808ee14c48" alt=""><figcaption></figcaption></figure>

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.                      |
