> 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/footer/mobile-navigation-bar.md).

# Mobile navigation bar

## Mobile navigation bar

**Show text labels**\
Enable the option to display the buttons' titles.

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

#### Mobile

Apply settings on the following scales individually for mobile:

**Height**\
Use the scale, which ranges from 45 to 80 pixels, to adjust the navigation bar height.

**Button spacing**\
Using the current scale, change the spacing between buttons from 20 to 60 pixels.

#### Tablet

To apply changes on tablets, use the settings described below:

**Height**\
This scale helps adapt the navigation bar height from 45 to 80 pixels.

**Button spacing**\
The spacing between buttons can be adjusted from 20 to 80 pixels on the scale.

#### Colors

**Background**\
Highlight the navigation bar using the color picker.

**Icon**\
The item changes the icons' color in the bar.

**Label** \
Sets the labels' color.

**Counter**\
Changes the color of the cart item counter displayed on the cart icon.

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

{% hint style="success" %}
**Tip:** Add each icon individually by pressing the **"Add block"** button. The icons will be placed in the same order as the blocks added in the control panel on the left side of the screen.
{% endhint %}

***

### Home

Add the block to display the "Home" icon.

**Link**\
The icon can be linked to a specific page using the source selector.

***

### Catalog

Add the current block to display the "Catalog" icon.

**Link**\
The icon can be linked to a specific page using the source selector.

**Open in new tab**\
When enabled, the linked page opens in a new browser tab, allowing customers to keep their current page open while viewing the linked content.

***

### Search

Displays the "Search" icon in the navigation bar after adding the block.

**Open in new tab**\
Enable this option to open the Search page in a new browser tab after clicking the Search icon.\
By default, clicking the Search icon opens the Search drawer on the right side of the screen instead of navigating to a separate page.

***

### Account

Adds the "Account" icon to the bar.

**Open in new tab**\
When enabled, the linked page opens in a new browser tab, allowing customers to keep their current page open while viewing the linked content.

***

### Compare

This block sets the "Compare" icon in the bar.

**Open in new tab**\
When enabled, the linked page opens in a new browser tab, allowing customers to keep their current page open while viewing the linked content.

***

### Favorites

Shows the "Favorites" icon in the navigation bar.

**Open in new tab**\
When enabled, the linked page opens in a new browser tab, allowing customers to keep their current page open while viewing the linked content.

***

### Cart

Add the block to place the "Cart" icon in the bar.

**Open in new tab**\
Enable this option to direct customers to the Cart page that opens in a new browser tab when they click the Cart icon.\
By default, clicking the Cart icon opens the Cart drawer on the right side of the screen instead of navigating to the Cart page.

***

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