# Header

There are 3 layouts of header for you to choose from:

* [Header standard](https://blueskytechco.gitbook.io/alukas-shopify/header-group/header/header-standard)
* [Header vertical](https://blueskytechco.gitbook.io/alukas-shopify/header-group/header/header-vertical)
* [Header mega shop](https://blueskytechco.gitbook.io/alukas-shopify/header-group/header/header-mega-shop)

We also offer three distinct layout blocks for the header mega menu, each designed to cater to different visual and navigational preferences.

* [Mega menu with banner image](https://blueskytechco.gitbook.io/alukas-shopify/header-group/header/mega-menu-with-banner-image)
* [Mega menu with product](https://blueskytechco.gitbook.io/alukas-shopify/header-group/header/mega-menu-with-product)
* [Mega menu with collection](https://blueskytechco.gitbook.io/alukas-shopify/header-group/header/mega-menu-with-collection)

## Section settings

**Layout:** You can choose between Fluid Container, Stretch width, Full width for the layout or just leave it with the default layout of the video.

**Color schema:** You are allowed to change text color, background color, etc. with preset color.

**Center Sub Menu:** Align the submenu items to the center under their respective main menu items for a streamlined look.

**Enable Sticky Header:** Turn on the sticky header feature to keep the header visible at the top of the screen as users scroll down.

**Show Sticky Header on Mobile:** Choose whether the sticky header feature should also be active on mobile devices, ensuring easy navigation across all platforms.

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

**Enable Transparent Header:** Turn on the option for a transparent header, offering a sleek look to your site.

**Transparent Header on Mobile:** Decide whether to apply the transparent header feature to mobile devices as well, ensuring a consistent design across all platforms.

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

**Mega Menu:** Select from available mega menu designs or create a new one to enhance site navigation.

**Dropdowns Animation:** Choose an animation effect for when the dropdown menus are activated, adding a dynamic visual touch to the user interface.

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

You can set up text color and background color for your desire labels

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

**Menu Action on Mobile:** Decide if clicking on a parent menu item should redirect to a link.

**Enable Tab Categories:** Activate visibility for the tab categories.

**List All Collections:** Ensure all collections are visible under the categories tab.

**Custom Collection List:** Display only selected collections in the categories tab for a more curated experience.

<figure><img src="/files/2N7qklPoShdmsrZpElGY" alt=""><figcaption></figcaption></figure>

You have the autonomy to select which icons or features are displayed, allowing you to tailor the interface to your preferences and the needs of your users.

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

## Blocks settings

**Menu item:** Specify the name of the menu item to which the layout will be applied.

**Select label:** You can choose a label to display beside the menu item for additional information.

**Submenu:**

* **Desktop menu columns:** The submenu settings include the option to determine the number of columns for the desktop menu.
* **Mega menu custom width:** You can also set a custom width for the mega menu.
* **Full width:** If you select full width, it will override any custom width setting, expanding the menu across the entire screen width.

<figure><img src="/files/1JmmLcf12oTyrKimKq4f" alt=""><figcaption></figcaption></figure>


---

# 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://blueskytechco.gitbook.io/alukas-shopify/header-group/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.