# Header

<table data-header-hidden><thead><tr><th width="177"></th><th></th></tr></thead><tbody><tr><td>Header style</td><td>Choose the header styles from the following:<br>-Logo left menu center<br>-Logo left menu left<br>-Logo center menu left<br>-Logo left hamburger menu<br>-Logo center hamburger menu<br>-Logo left menu left with search bar<br>-Logo left hamburger menu with search bar</td></tr><tr><td>Enable sticky header</td><td>Tick the checkbox to make the header sticky.</td></tr><tr><td>Sticky header type</td><td>Choose the sticky header type from the following options:<br>- On scroll up (Using this, the header changes to sticky only when users scroll the page back to the top.)<br>- Always (Using this, the header remains sticky always irrespective of the page scroll.)</td></tr><tr><td>Logo</td><td>Choose any image to appear as the store logo.</td></tr><tr><td>Desktop logo width</td><td>Adjust the slider to customize the logo width from 100px to 300px.</td></tr><tr><td>Mobile logo width</td><td>Adjust the slider to customize the logo width from 50px to 100px.</td></tr><tr><td>Transparent header</td><td><strong>Enable desktop transparency</strong> <br>Tick this checkbox to make the header transparent on the desktop view.<br><br><strong>Enable mobile transparency</strong><br>Tick this checkbox to make the header transparent on the mobile view.<br><br><strong>Alternate logo</strong><br>Choose any logo to appear in the transparent header.<br><br><strong>Text/icon color</strong><br>Choose any color to appear as the text or icon's color in case of transparent header.</td></tr><tr><td>Navigation</td><td><strong>Menu</strong> <br>Select menus from the Shopify backend default navigation list. It will appear in the <strong>Header</strong> as the menu. <br><em>For more details, refer to the</em> <a href="https://help.shopify.com/en/manual/online-store/menus-and-links"><em>Shopify menus.</em></a></td></tr><tr><td>Desktop menu</td><td><strong>Menu type</strong><br>Select from Dropdown or Mega menu to determine the menus type.<br><br><strong>Menu font</strong><br>Select from heading or body fonts. These fonts can be changed in the theme settings>typography.<br><br><strong>Menu font size</strong><br>Select from small, regular, medium or large to determine the font size of the main menus.<br><br><strong>Second level menus font</strong><br>Select from heading or body fonts. These fonts can be changed in the theme settings>typography.<br><br><strong>Second level menus font size</strong><br>Select from small, regular, medium or large to determine the font size of sub menus.</td></tr><tr><td><h4>Hamburger menu</h4></td><td><strong>Font family</strong><br>Select from heading or body fonts. These fonts can be changed in the theme settings>typography.</td></tr><tr><td>Mobile menu</td><td><strong>Menu font</strong><br>Select from heading or body fonts. These fonts can be changed in the theme settings>typography.<br><br><strong>Font size</strong><br>Adjust the rangebar to determine the font size of the main menus.<br><br><strong>Enable social media icons</strong><br>Tick this checkbox to show social media icons in the mobile drawer. These can be set up from theme settings>Social media.<br><br><strong>Enable language selector</strong><br>Tick this check box to show the language selector. To add a language, go to your <a href="https://admin.shopify.com/store/shark-bright/settings/languages">language settings.</a><br><br><strong>Enable currency selector</strong><br>Tick this check box to show the currency selector. To add a country/region, go to your <a href="https://admin.shopify.com/store/shark-bright/settings/payments">payment settings.</a></td></tr><tr><td>Icons</td><td><strong>Enable search</strong><br>Select the checkbox to show search icon in the header.<br><br><strong>Enable account</strong><br>Select the checkbox to show account icon in the header.<br><br><strong>Enable cart</strong><br>Select the checkbox to show cart icon in the header.</td></tr></tbody></table>

## Mega menu settings

Add **Mega menu** block in the header section and type the same name of the first level menu in the **Menu label** as shown below. It links the mega menu with the header.

<figure><img src="https://570180373-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYWSUNUY27kSWmpCP5tbi%2Fuploads%2FWZ4X7DWl4vpqHFtl8yNQ%2Fimage.png?alt=media&#x26;token=ed0ae1ef-add1-4369-99d2-289b9a9d0fc5" alt=""><figcaption></figcaption></figure>

<table data-header-hidden><thead><tr><th width="206"></th><th></th><th data-hidden></th></tr></thead><tbody><tr><td>Menu label</td><td>Type the name of the first level menu.<br>It connects the mega menu to the menus added in the header.<br><br><em>To understand menus more, refer to</em> <a href="https://help.shopify.com/en/manual/online-store/menus-and-links/drop-down-menus"><em>Shopify menus</em></a><a href="https://help.shopify.com/en/manual/online-store/menus-and-links/drop-down-menus"><em>.</em></a></td><td></td></tr><tr><td>Content 1-4</td><td><strong>Image</strong><br>Add any image to appear in the mega menu.<br><br><strong>Heading</strong><br>Type any text to appear as a heading.<br><br><strong>Link</strong><br>Add any link to redirect the image of the mega menu.<br>Overlay opacity</td><td></td></tr></tbody></table>

## Hamburger mega menu

*(Note: This hamburger mega menu does not work on the mobile and this block will show only with the hamburger header styles.)*

<table data-header-hidden><thead><tr><th width="215"></th><th></th></tr></thead><tbody><tr><td>Image</td><td>Choose any image from the library.</td></tr><tr><td>Video</td><td>Choose any video from the library.</td></tr><tr><td>Heading</td><td>Add any heading text.</td></tr><tr><td>Link</td><td>Add any link to redirect the added media.</td></tr><tr><td><h4>Colors</h4></td><td><strong>Text</strong>:      <br>Choose any color for the text color.<br><br><strong>Overlay</strong>: <br>Choose any color for the overlay.                          <br><br><strong>Overlay opacity:</strong><br>Adjust the range bar to determine the overlay opacity.</td></tr></tbody></table>