Header

Overview:

The Header section is designed to display the main store header with support for logo, navigation menu, country or region selector, language selector, store locator, account, cart, and search. It also supports multiple header views, sticky behavior, full width layout, color scheme, and spacing controls.

This section includes controls for header layout, logo sizing, alert text, menu settings, selectors, store locator, account and cart visibility, search settings, sticky behavior, style, and spacing.

The section also supports blocks for mega menu, menu badge, and store location content.

Set up the header:

Go to Customize theme.
Click on the top dropdown menu to select the Home page.
From the side menu, select “Header”.
Configure the “Header” in the setting on the right side of the screen(Depending on screen size).

Customization:

Setting	Description
Header View	Controls the overall header layout style. Available options: view 1 or view 2.
Logo	Easily add a distinctive logo to your online store. Logo image: To include a Logo, click "Select Image," upload from your computer, or pick from your store's file library. Desktop logo image width: Adjust the desktop logo image width using the Custom Logo Size slider, ranging from 50px to 300px. Mobile logo image width: Adjust the desktop logo image width using custom logo size slider.
Menu	Select the main menu by clicking "Change" to choose a different menu.
Menu in Center	Center-align the main menu in View 1 layout.
Enable country/region selector	Activate a selector allowing customers to choose countries and regions for viewing product prices in their preferred currency.
Enable language selector	Activate a language selector for customers to browse your store in their language of choice, based on your language settings.
Alignment	Select the alignment for the internal elements of the header: top or middle (default). This option aligns the logo, navigation, language, and country elements. Note that changes are only visible if you have a multi-line navigation layout.
Sticky Header	Decide whether to use a sticky header and its display style. None: The header remains static and is not sticky as users scroll. Always: The header is constantly visible as users scroll both up and down the page. On Scroll up: The sticky header emerges when users scroll upward from the bottom to the top of the page. On Scroll: The sticky header becomes visible as users scroll down the page.
Show Cart on Sticky	Show the cart icon when the sticky header is active.
Show Account on Sticky	Show the account icon when the sticky header is active.
Enable Store Locator	Show a store locator icon and modal in the header.
Show Account	Display the customer account icon in the header.
Enable Show cart	As users scroll, the cart and account icon will appear.
Show Search	Enable a search bar in the header.
Enable Predictive Search Suggestions	Display search suggestions while typing.
Full Screen Width	Stretch the header content to the full width of the browser.
Color scheme	Choose a set of colors to apply to this section.
Section spacing	Add space to the top padding or bottom padding of the Utility bar. Use the range slider to add between 0px and 100px of space to the top or bottom of your Utility bar. Adjust as needed for a polished look.

Mega menu:

A mega menu block used to configure advanced dropdown layouts for specific menu items.

A mega menu is a navigation menu that neatly organizes many links and categories and is a great way to organize complicated menu structures. Using the correct type of mega menu will allow your customers to easily find the desired products or collections and should help with conversions.

Configure the mega menu:

Adding a Mega menu to the main navigation is a breeze. Follow these steps to configure the settings:

Select the "Header" option in the theme editor.
Click on "Add Block." In the Kidu theme, users can create two types of blocks: "Mega menu" and "Menu badge."

Mega Menu block setting:

Settings	Description
Menu item Index	To link the Mega menu, enter the exact name into "Menu item label." For example, if your main menu has "Home", "Products," "Collection," "Contact" and "Shop," typing "Shop" in the “Menu item label” makes it the Mega menu. Note: Enter the exact label from navigation, such as 'Home' or 'Contact'; it is case-sensitive and space-sensitive.
Layout type	Mega Menu layout types are following as: Menu with columns: This layout is ideal when you have a large number of categories, each with a roughly equal amount of links. Menu with slider: A menu with a slider combines a menu or navigation bar with a slider. Note that the slider will not be visible on mobile screens. Menu with banner: This layout is suitable when you have a limited number of categories, each with a roughly equal amount of links. You can also display banners. However, note that the banner image may not be visible on mobile and tablet screens. Menu with tabs: This layout is effective when you want to showcase collections, with each collection having a roughly equal amount of links. Additionally, you can display banners. Please be aware that the banner image may not be visible on mobile screens.
Marquee speed	Controls the speed of the marquee animation inside the mega menu.
Scroll Settings	Adjust the scrolling speed anywhere from 1 to 30 seconds. Note - Only works with “Menu with slider” option and show from above 1200px screen size.
Pause on hover	Pauses the mega menu marquee animation on hover when enabled.
Banner image 1	Displays the first banner image inside the mega menu. Note: Works with "Menu with Banner" and "Menu with Tabs" layouts only and will only show on screens above 1200px.
Banner link 1	Sets the destination link for the first banner image.
Open first image in new window	Opens the first banner image link in a new browser window when enabled.
Banner image 2	Displays the second banner image inside the mega menu.
Banner link 2	Sets the destination link for the second banner image.
Open second image in new window	Opens the second banner image link in a new browser window when enabled.

Menu with Columns:

Menu with slider:

Menu with banner:

Menu with tabs:

Menu badge:

A menu badge block used to add a badge label to a specific menu item.

Badges are little colored labels that can appear above a menu item.

Configure the Menu Badge:

Add a “Menu badge” block.
Add the menu label similar to the first-level navigation added to the Shopify navigation. Adding this same name links the menu with the menu badge.

Menu Badge block Settings:

Setting	Description
Menu item label	To show Menu badge , enter the exact name into "Menu item label." For example, if your main menu has "Home", "Products," "Collection," "Contact" and "Shop," typing "Shop" in the “Menu item label” then it will show badge on top of the “Shop” menu item. Note: Enter the exact label from navigation, such as 'Home' or 'Contact'; it is case-sensitive and space-sensitive.
Badge label	You can add badge text, e.g. “Sale”, “New Arrival” etc.
Background color	Select any color for the background color of the section.
Text color	Select any color for text color of the section.

Store Block

Setting	Description
Heading	Set a title for the store location block.
Heading Size	Choose the size of the heading text.
Description	Add a description for the store location.
Map Iframe	Embed a Google Map using an iframe.
Store Button Label	Label text for the call-to-action button.
Store Button URL	Add a link for the call-to-action button.
Open New Window	Open the button link in a new browser window.
Image	Upload an image to visually represent the store location.
Image ratio	Controls the aspect ratio used for the store image. Available options: adapt to image, portrait, square, or landscape.