# 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="https://1560263855-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fz14kVz432NnMEq8AbqBr%2Fuploads%2FLJBbS4QzsCEqxsMgQ5ZJ%2Fimage.png?alt=media&#x26;token=4ec5ec87-c583-4ab0-ab59-90602a8f4574" 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="https://1560263855-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fz14kVz432NnMEq8AbqBr%2Fuploads%2FSQUXknSl69r9kWPa7dUf%2Fimage.png?alt=media&#x26;token=b6a79034-3799-4700-b035-09b5ddcc2014" 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="https://1560263855-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fz14kVz432NnMEq8AbqBr%2Fuploads%2FKj1toJxBHTWRKxadDULP%2Fimage.png?alt=media&#x26;token=901f1606-7892-4634-8aa3-c8b264be16bc" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://1560263855-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fz14kVz432NnMEq8AbqBr%2Fuploads%2FIhe0sTzQwwiijAAB9xHx%2Fimage.png?alt=media&#x26;token=5032b89d-e2d9-4eb2-af2e-f833d01a3923" 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="https://1560263855-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fz14kVz432NnMEq8AbqBr%2Fuploads%2Fzl7R0f0ZpMsCzwqOyptX%2Fimage.png?alt=media&#x26;token=66ee361a-2e67-439c-b350-23f78394995b" 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="https://1560263855-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fz14kVz432NnMEq8AbqBr%2Fuploads%2Ftf3I1WWuLBpWiN5fdDCc%2Fimage.png?alt=media&#x26;token=f2655edb-7614-46ef-8c1a-07ad03df00b3" 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="https://1560263855-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fz14kVz432NnMEq8AbqBr%2Fuploads%2Fj1uW4vtjnclV20KW99RJ%2Fimage.png?alt=media&#x26;token=d7373e5c-2e8b-4a4a-a2e4-6639ee94ee4b" alt=""><figcaption></figcaption></figure>