# Header

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

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, shopping cart icon, etc.

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

You can freely customize your header to suit your business needs by adding your logo image, choosing the main menu, and other addons using **Megamog** theme.

## Logo settings

Add a logo in the header to grab visitors' attention and set the tone for your brand. The recommended image size and format is 200x80px .png with a transparent background.&#x20;

{% hint style="success" %}
Steps

1. In the theme editor **(Customize)**, click **Theme Setting > Logos.**
2. Select image under **Logo.**
3. **Save.**
   {% endhint %}

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

## Design settings

Change the position of the logo and menus based on your preferences.&#x20;

### **1. General**

Change style color for Header.

Adjust sticky header(none/on scroll up/always).

Add separator line (none/bottom/middle/bottom & middle).

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

### **2. Header icons**

Provide settings to the header icons such as account, wishlist, compare and custom icon by enabling the suitable checkboxes.&#x20;

For custom icons, you can either add more other icons in header.

<figure><img src="/files/3FIV3HV4n5l6jcNjTFO6" alt=""><figcaption></figcaption></figure>

### 3. Search settings

Show search button with 3 design: icon, icon plain and text.

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

### 4. Menu settings

This section lets you display your desired menus along with the logo.&#x20;

Provide settings to the menu such as country/region, language by enabling the suitable checkboxes.&#x20;

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

{% hint style="success" %}
To add, remove, or edit menus in your Shopify store, see [Editing menus](https://docs.foxecom.com/minimog-theme/getting-started/mega-menu).
{% endhint %}

{% hint style="info" %}
Regarding the **currency selector** and **language selector**, you must configure them in Shopify admin for them to show on the front end.&#x20;
{% endhint %}

{% hint style="warning" %}
To sell in multiple currencies, you need to have [Shopify Payments](https://help.shopify.com/en/manual/payments/shopify-payments) enabled in your online store.
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.foxecom.com/megamog-theme/pages-global-sections/header.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.