# Header Vertical

<figure><img src="/files/9JXzN20ncIwZgw0tpKln" alt=""><figcaption></figcaption></figure>

Follow our tutorial video to display the Vertical Header properly.

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJbMIFqRrJiqVKdsbTyW4%2Fuploads%2FXUsFJ1ErAFgw0a1YXD9c%2FHeader%20Vertical.mp4?alt=media&token=480686d2-8553-47f1-bad9-04dacd0c55e6>" %}

## General settings

**Categories menu:** Select the menu that will be displayed in the vertical header.

**Title Menu:** Set the title for the categories menu in the vertical header.

**Background Title:** Choose the background color for the menu title. You can use predefined colors or apply custom CSS styling.

**Menu Icons (1-10):** Add a custom SVG code to display an icon for each corresponding menu item in the vertical header. Up to 10 icons can be assigned, enhancing visual navigation.

<figure><img src="/files/6nShLdLIz4oeBlCmG0QY" alt=""><figcaption></figcaption></figure>

### Menu Parent

**Menu Item:** Enter the name of the level 1 menu to display the mega menu dropdown. Follow the format `[icon_x]MenuName` where **x** represents the icon number. Pay attention to uppercase and lowercase letters.

**Open Link in New Tab:** Enable this option to open the menu item link in a new browser tab.

#### Submenu

**Desktop Menu Columns:** Set the number of columns for the submenu when displayed on desktop.

**Mega Menu Custom Width:** Adjust the custom width (in pixels) for the mega menu to fit your design layout.

#### Banner Image Settings

**Banner Position:** Choose whether the banner image appears on the **left** or **right** of the mega menu.

**Banner Style:** Select the banner orientation: Horizontal, Vertical

**Banner Width:** Adjust the banner image width as a percentage of the total mega menu width.

**Banner Image:** Upload or select an image to be displayed as the banner within the mega menu.

**Link:** Add a URL to make the banner.

<figure><img src="/files/Nan2nAPDul2wyuHS3qz5" alt=""><figcaption></figcaption></figure>


---

# 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://nextsky.gitbook.io/glozin-theme/header-group/header-vertical.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.