# Header

The header is a user’s first touchpoint upon entering an online store, offering a streamlined overview of key elements. It prominently displays the brand logo, main navigation links, and essential tools like the search bar and cart icon, setting the tone for a smooth and engaging shopping experience.

{% hint style="success" %}
**Steps:**

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

### Settings

<figure><img src="https://1556176885-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPgk3wauuyAKlfkLLpBvA%2Fuploads%2FSezb1IQQnA0sZA5vdLTd%2Fheader.jpg?alt=media&#x26;token=9bed3b4c-5373-489a-ba78-78322b1516cd" alt=""><figcaption></figcaption></figure>

* **Width** - Width of the header -> 3 options : Container / Streched / Full width
* **Desktop logo position** - 5 Options
  * Logo top left, menu left
  * Logo center ,menu below
  * Logo center, menu left
  * Logo center, menu drawer
  * Logo left, menu left
  * Logo left, menu center
* **Logo image** - Upload your store's logo
* **Desktop logo width** - Customize the size of the logo on desktop screens
* **Mobile logo width** - Customize the size of the logo on mobile screens
* **Menu ( Navigation )** - To add, remove, or edit menus in your Shopify store, please refer to: [Editing menus](https://help.shopify.com/en/manual/online-store/menus-and-links/editing-menus)&#x20;

{% hint style="info" %}
You can create [megamenu](https://oranthemes.gitbook.io/nimbus-theme/global-sections/megamenu)
{% endhint %}

* **Sticky header** - 3 Options => None, On scroll up, Always
* **Show border** - Show border bottom

### Country/region selectort

<figure><img src="https://1556176885-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPgk3wauuyAKlfkLLpBvA%2Fuploads%2FfA3J2pkcGNqZULQOLGjJ%2Flang.jpg?alt=media&#x26;token=47a7bfdd-2944-4f4a-8dc5-f31172b3448a" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
To display the currency selector, language selector, and account icon on the storefront, configure these settings with in the Shopify admin.
{% endhint %}

### Transparent header

<figure><img src="https://1556176885-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPgk3wauuyAKlfkLLpBvA%2Fuploads%2FCg94vZXuvtRb1CfiW8c3%2Ftran.jpg?alt=media&#x26;token=21e99389-07f7-48bd-a7f3-edfc667fc4e6" alt=""><figcaption></figcaption></figure>

* **Enable** - Home page only. For best results, use an image section such as slideshow.
* **Text color**
* **Logo image** - Displayed when transparent header is enabled. Uses the dimensions set on your main logo.

### Mobile

* **Mobile logo position** - Center / Left

### Spacing

<figure><img src="https://1556176885-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPgk3wauuyAKlfkLLpBvA%2Fuploads%2FLB06zNvPYqWdFTcmpGcE%2Fspace.jpg?alt=media&#x26;token=7ec65354-ee62-4ffc-a3fa-45a39af173fb" alt=""><figcaption></figcaption></figure>

* **Bottom margin** - Margin bottom of the header

`Section padding`

* **Padding top** - Padding top of the  header
* **Padding bottom** - Padding bottom of the  header