> For the complete documentation index, see [llms.txt](https://mpithemes.gitbook.io/unicorn-shopify-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://mpithemes.gitbook.io/unicorn-shopify-theme/section-groups/header/icon-menu.md).

# Icon menu

{% hint style="success" %}
Use the additional blocks to customize the icons menu: "[<mark style="color:blue;">Badges</mark>](/unicorn-shopify-theme/section-groups/header/icon-menu/badges.md)" and "[<mark style="color:blue;">Menu item</mark>](/unicorn-shopify-theme/section-groups/header/icon-menu/menu-item.md)".
{% endhint %}

**Enable full width**\
Activate the option to display the menu in the full page width.

**Show top separator line**\
Use the option to display the dividing line between the main and secondary menus.

**Show bottom separator line**\
Display the dividing line below the icons menu.

**Background**\
Applies the icons menu background color.

#### Menu

**Navigation**\
Set a menu by pressing **"Select"**.\
Ensure the menu has been created in *Shopify admin -> Content -> Menus*.\
Read the details on how to add drop-down menus in the initial [<mark style="color:blue;">documentation</mark>](https://help.shopify.com/en/manual/online-store/menus-and-links).

**Open dropdowns on click**\
If the option is enabled, the drop-down menu will only be visible when a menu item is clicked.

**Match menu items using**\
Choose how menu items are matched to navigation content.

* **"Index"**. Matches menu items based on their position in the menu. The first menu item is linked to the first content item, the second menu item to the second content item, and so on.
* **"Title"**. Matches menu items based on their names. Menu items and content items with the same title are automatically linked together.

**Animate icons and text**\
Turn on the option to activate the animation effect that swaps the position of an icon/image with the menu item name when hovering over a tile. On hover, the menu item name moves to the top, and the icon/image shifts to the bottom.

**Use icon width limit**\
The option activates the width scale, which changes the icon size.

**Width**\
Change the logo size from 0 to 100 pixels using the scale.

Set up colors of the elements: **"Text"**, **"Icon"**, **"Item background"**, **"Border"**,  **"Text on hover"**, and **"Border and background on hover"**.

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

**Corner radius**\
The scale lets you control whether to use square or rounded corners for tiles. Use a value from 0 to 40 pixels to set the desired shape.

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

**Border width**\
To display tile borders, use a scale that ranges from 0 to 10 pixels.

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

#### Sticky effect

**Enable**\
Tick the option to activate the sticky header. Works on all devices.

**Hide on scroll down**\
The option disables the sticky header when scrolling down.