> For the complete documentation index, see [llms.txt](https://nestable-studio.gitbook.io/test/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://nestable-studio.gitbook.io/test/theme-sections/header.md).

# Header

The header section is used to set up and customize the main navigation area of the website, including elements such as logos, menus, and contact information.

### (I) Basic Settings

* **Menu**: Select an existing menu as the main navigation menu or create a new one. The main navigation menu will appear at the top of the page to help users quickly navigate to the main content of the website.
* **Sticky header**: There are three options: Not Fixed, Fixed on Upward Scroll, and Always Fixed. You can choose according to your needs.

### (II) Color

* **Color scheme**: Select or edit a color scheme to define the color styles of all elements on the page, including background color, text color, etc.
* **Menu color scheme**: Select or edit a color scheme to define the color styles of all elements on the page, including background color, text color, etc.

### (III) Utilities

* **Country/region selector**: Choose whether to enable it to display the customer's country/region selector.
* **Language selector**: Choose whether to enable it to allow customers to switch languages.

### (IV) Spacing

* **Bottom margin**: Set the size of the bottom margin, with a minimum of 0px and a maximum of 100px.

### (V) Padding

* **Top**: Set the size of the top margin, with a minimum of 0px and a maximum of 36px.
* **Bottom**: Set the size of the bottom margin, with a minimum of 0px and a maximum of 36px.

### (VI) Transparent Navigation Settings

* **Open**: Enable this option to make the header transparent, which is suitable for page designs with more visual impact.
* **Text Color**: Set the text display color when the transparent header is activated.

### (VII) Search Suggestions

* **Search suggestions**: You can choose to enable or disable this option.
* **Social media**: Edit the URLs of social media. This is for editing the social media information of the entire website.
* **Logo**: Upload or change your website's logo. It is recommended to use high-resolution images to ensure clarity on various screen sizes.
* **Width**: Use the slider to adjust the display width of the logo to adapt to different page layout requirements, with a minimum of 50px and a maximum of 300px.
* **Vertical offset**: Adjust the vertical offset size of the logo to adapt to different logo display styles, with a minimum of -12px and a maximum of 12px.
* **Type**: There are three types available: Drawer, Page, and Popup Notification.

### (VIII) Mega Menu

You can use the (Add Block) function to add a Mega Menu module to the page section and add images to the navigation menu to enhance visual appeal.

#### 1. Mega Menu

* **Menu item**: Directly enter the items to be displayed in the mega menu.
* **Image size**: Adjust the display size of images in the mega menu, with a minimum size of 150px and a maximum of 300px.
* For each menu item, you can upload up to 3 images, and set corresponding image uploads, link addresses, titles, subtitles, and adjust the display color of the text.

**(1) Banner Image**

* **Image**: Upload or change the image. It is recommended to use high-resolution images.
* **Link**: Select the link address, and clicking on the image will jump to the corresponding address.
* **Heading**: Edit the heading content.
* **Subheading**: Edit the subheading content.
* **Text color**: Customize the text display color for optimal visual presentation.