# Header

***

<Embed url="https://youtu.be/xz6Gly15Xtc" />

## What is the header section?

The header is a content block at the upper part of your website that appears on every page. It usually contains the logo of a store, the main navigation menu, and other elements such as a search bar, language selector, etc.

The header plays a vital role in branding your site, helping visitors navigate, and displaying your most important pages.&#x20;

## How to edit the header section in Sleek

You can freely customize your header to suit your business needs by choosing the main menu, and other addons.

<Hint type="success">

Steps:

1. Go to **Online Store >** **Themes > Customize.**
2. Choose **Header** section
3. Make necessary changes **> Save.**

</Hint>

### Menus

Click **Select menu** to connect a menu (assembled in the **Navigation** admin).  You can choose your desktop menu and mobile menu separately.

![image](https://docs-assets.foxecom.app/sleek-theme/image_4xppPrYM.png)

<Hint type="info">

To add, remove, or edit menus in your Shopify store, see [Editing menus](https://help.shopify.com/en/manual/online-store/menus-and-links/editing-menus)

</Hint>

Set the menu's dropdown to be opened by clicking or hovering on the menu items using the **Dropdown menu trigger** setting.

Enable the **Show separator line** checkbox to delineate the header from other sections with a separator line.

![image](https://docs-assets.foxecom.app/sleek-theme/image_ZPQL89uD.png)

### Header layout

Decide how the logo and menu are displayed on your header.

<Tabs>
<Tab title="Logo left, menu center">

![image](https://docs-assets.foxecom.app/sleek-theme/image_tnbllr5u.png)

</Tab>

<Tab title="Logo center, menu left">

![image](https://docs-assets.foxecom.app/sleek-theme/image_aPN6JzoF.png)

</Tab>

<Tab title="Logo center, menu split">

![image](https://docs-assets.foxecom.app/sleek-theme/image_MTI0X1ag.png)

</Tab>
</Tabs>

To add your logo, go to Theme settings > [Logo](https://docs.foxecom.com/sleek-theme/theme-settings/logo).

### Sticky header

Set your header to be visible when scrolling up or always visible using the Sticky header setting.

![image](https://docs-assets.foxecom.app/sleek-theme/image_FMxGDVsJ.png)

You can also enable a separator line between the header and other sections below.

### Transparent header

![image](https://docs-assets.foxecom.app/sleek-theme/image_fkZJhixP.png)

You can enable a transparent header to create a visually appealing and immersive experience for your customer. This feature allows the first section to seamlessly blend below your header, rather than appearing separate.

* **Enable transparent header**: Enable transparent header for your theme
* **Color**: Change the color of the text on transparent header

![image](https://docs-assets.foxecom.app/sleek-theme/image_HmqAw0Uh.png)

### Mobile layout

Decide the **logo position** on mobile view:

* Logo left, hamburger menu icon right
* Logo center, hamburger menu icon left.

<Tabs>
<Tab title="Logo left">

![image](https://docs-assets.foxecom.app/sleek-theme/image_yPLhUgej.png)

</Tab>

<Tab title="">

![image](https://docs-assets.foxecom.app/sleek-theme/image_3ep2FeVx.png)

</Tab>
</Tabs>

### Add-ons

* **Show social media icons**: based on your settings in Theme settings > [Social media](https://docs.foxecom.com/sleek-theme/theme-settings/social-media).
* **Enable language selector**: to include a Language selector dropdown for customers to select their preferred language.
* **Enable country/region selector**: to include a Country selector dropdown for customers to select their region and currency.