# Header

The header is a global section available on all pages of the theme. This section can not be moved or hidden. The main purpose of this section is to provide the users with the ability to easily browse through the site. It is quite functional and have number of features.

Below are part of the settings with some additional details.

### Logo position (or header layout)

This setting is used for changing the position of the logo and the header layout in general. The options are:

**Top - Above navigation**<br>

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

When this variation is used, you'll see the contact links in the upper left corner. These are the contact links controlled through `Customize > Theme settings > Global`.

#### Left

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

#### Center

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

### Logo image

There are settings for choosing the logo. It could be an image like a simple JPG or PNG, or it can also be a SVG.&#x20;

In order to set the SVG you need to copy-paste the code from your logo SVG file. To do so, you need to open the SVG with any text or code editor, then copy the code and paste it in the `Logo SVG Code` field. The code should start with `<svg ....` and should end with `</svg>`.

### Menu

The menu option is used to choose the navigation you want to show in your header. You can learn more about the navigations here: <https://help.shopify.com/en/manual/online-store/menus-and-links>.

The different menus in your site are probably located in `yourdomain.com/admin/menus`.

### Predictive search

The only setting available here is to be turned `on` or `off`.

If it's turned `ON` - once you start typing a search term in the search field you'll see some suggestions listed below. These are based on Shopify's algorithm for searching through the store.

Example:

<figure><img src="/files/5naVTuGxflvN0ozNGZrl" alt=""><figcaption></figcaption></figure>

If it's turned `OFF` - you won't see any suggestions while you're typing into the search field. Instead, you'll have to hit the `enter` button of the keyboard and you'll be redirected to the search results page which will show the desired results.

### Transparent header

Enabling this option will make the header transparent on the homepage. The available settings are:

* "Transparent on Home page" - enabling/disabling the transparent header
* Logo and Logo SVG - picking a logo for the transparent header (for example it could be a logo in a different color for the transparent version of the header)
* Links and text color - picking a color for the transparent version of the header. For example when transparent, you might need the header items to have a different color and this setting will allow you to set that accordingly.

![](/files/uyLLEcBLhUN8iBRqvFEc)

### Sticky header

Sticky header is enabled by default. However, you can turn this OFF by unchecking the setting called "Enable sticky header":

![](/files/JyeeCuXiGK5ChslZnwA8)

### First level links arrows

With the setting called "Enable first level links dropdown arrow" you can enable/disable the arrows shown in the top navigation level:

<figure><img src="/files/4KCsV8Esfpr4JqUMz2uN" alt=""><figcaption></figcaption></figure>

Note: the arrows in the dropdowns will always work no matter what you choose for the first level dropdowns.

Setting in the admin:

![](/files/w9pB3HIPDqaLWSP1ifyu)

### Megamenu

To enable the megamenu for a specific item from the main menu you need to add a `megamenu` block by clicking on `Add Megamenu` here:

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

This will create a new block under the Header section. Then, within the new block in the first field called `Link Level 1` you should enter the text of the link from the first level menu that you want to attach the megamenu to. For example, if you have navigation like `Home, Shop, Contact us` and you want to attach it to `Shop` you need to add the text `Shop` in this `Link Level 1` field.

Within one megamenu there are 3 predefined featured items that will take place here:

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

For each of the featured items you have the very same settings: image, heading, subheading, link. Heading and subheading are shown on hover.

**NOTE:** you don't have to fill all of the three featured items if you don't need them.&#x20;

**IMPORTANT:** Please be aware that if you have a lot of 2nd level menu items and you use 2 or 3 of the featured items - the megamenu might get flattened.


---

# 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://bigstart.gitbook.io/marble-documentation/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.