# Mobile Menu

The Mobile Menu provides a streamlined navigation experience for smaller screens. It features a collapsible, touch-friendly interface with a hamburger icon that toggles the menu at the defined mobile menu breakpoint.

You can edit the Mobile Menu by going to **Appearance -> Customize -> Header -> Mobile Menu**.​

The menu content is divided into two sections: *Main Content* and *Footer Content*. This structure allows you to add items to the end of the mobile menu container, making them easily accessible while on mobile devices.

Like other header sections, the mobile menu uses a drag-and-drop interface to organize and structure the menu elements.

The mobile menu offers a slightly smaller selection of elements, as not all elements available in other header sections are supported in the mobile menu.​

<figure><img src="/files/GnAv1iQ9Fv2QIJnU9Rgh" alt="" width="268"><figcaption><p>Mobile menu elements</p></figcaption></figure>

To add elements simply click :heavy\_plus\_sign: **Add** link in one of content containers and the list of elements will show up.

### Menu Options

You can adjust the behavior and style of the mobile menu by accessing the options in the Mobile Menu section. Scroll down to the **Menu Options** section to make your changes.:

<figure><img src="/files/3ZuWp2TOuHt4gbIDDi5s" alt="" width="325"><figcaption><p>Menu Options</p></figcaption></figure>

**Type**\
The **Slide Menu** provides a standard mobile menu animation, while the **Full Screen** option offers an alternative way to display the menu across the entire screen.

**Slide Direction**\
This option applies only to the **Slide Menu** type and allows you to set the direction from which the menu will slide into view on the screen.

**Close Button**\
Alternatively, you can add a close button (:x: shaped) to the screen to hide the mobile menu.​

**Breakpoint**\
The breakpoint at which all menu types become hidden and the mobile toggle button appears, ensuring that only the mobile menu is visible at that viewport and smaller sizes.

### Style Options

Like other header parts, the mobile menu also supports custom styling, offering extensive options for configuring its appearance and design.

<div><figure><img src="/files/gn9HuVltTA38dtGD8g6U" alt="" width="324"><figcaption><p>Overlay and content container style</p></figcaption></figure> <figure><img src="/files/ZDQRWCjwMm1EskP31hqj" alt="" width="324"><figcaption><p>Slide Menu type style options</p></figcaption></figure></div>

**Overlay**\
The overlay color that covers the screen when the mobile menu is active.

**Content Background**\
Applicable only to the Slide Menu type, this option sets the background color of the menu content container.

**Links**\
The colors for the *normal*, *hover*, and *active* states of the menu items.

**Text** \
Any text that is not a link inside the menu will be colored with this option.

#### Slide Menu Type Options

**Content Max Width**\
The maximum width of the menu container on the screen, ideally set between 50% and 80% of the window width.​

**Item Spacing**\
The spacing between header elements and root-level menu items.​

**Padding**\
Padding applied within the menu container.​


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.kaliumtheme.com/general/header/mobile-menu.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.