> For the complete documentation index, see [llms.txt](https://nextsky.gitbook.io/glozin-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://nextsky.gitbook.io/glozin-theme/header-group/header-vertical.md).

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