# Header

The header settings make it possible for you to fully customize the header of the theme. Upload your logo, mega menu, search bar etc.

1. From your Shopify admin, go to **Online Store** **->** **Themes**.
2. Find the theme that you want to edit, and then click **Customize**.
3. From the side menu, select **Header**. Configure the **Header** in the setting on the side with the following settings.

<table><thead><tr><th width="272">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Section width</td><td><p>Select the section width from the dropdown menu:</p><ul><li><strong>Page width</strong></li><li><strong>Customized width</strong></li></ul></td></tr><tr><td>Customize width</td><td>Determines the width of the section when you choose "Customized width" option. Can be from <strong>1000px</strong> to <strong>1800px</strong>, increasing arithmetically of <strong>50px</strong> (pixel).</td></tr><tr><td>Layout style</td><td><p>Select the style of the header:</p><ul><li><strong>Special</strong></li><li><strong>Classic</strong></li></ul><p><em><mark style="color:red;">(Special style applies to the homepage:</mark><mark style="color:red;"> </mark><mark style="color:red;"><strong>'Beauty Blossom'</strong></mark><mark style="color:red;"> </mark><mark style="color:red;">for the specific logo position. When using this style, you cannot move the logo position)</mark></em></p></td></tr><tr><td>Show separator line</td><td>Displays a line at the bottom to visually separate this section from the other sections.</td></tr><tr><td>Sticky header</td><td><p>Header shows on the screen:</p><ul><li><strong>None</strong></li><li><strong>On scroll up</strong></li><li><strong>Always</strong></li></ul></td></tr><tr><td>Color scheme</td><td>Select a color scheme to set the text and background colors for the section</td></tr><tr><td>Text size</td><td><p>The size of the menu lv-1 text:</p><ul><li><strong>XX-Small</strong></li><li><strong>X-Small</strong></li><li><strong>Small</strong></li><li><strong>Medium</strong></li><li><strong>Large</strong></li><li><strong>X-Large</strong></li><li><strong>XX-Large</strong></li><li><strong>XXX-Large</strong></li></ul></td></tr><tr><td>Text transform</td><td><p>Select the font style transform of the menu lv-1:</p><ul><li><strong>Lowercase</strong></li><li><strong>Capitalize</strong></li><li><strong>Uppercase</strong></li></ul></td></tr></tbody></table>

#### Transparent header

<table><thead><tr><th width="272">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Enable transparent header on homepage</td><td>Enable/disable checkbox<br><em><mark style="color:red;">(Use the same dimensions as main logo)</mark></em></td></tr><tr><td>Logo image</td><td>Uses this logo on the pages which transparent header is enabled.<br><em><mark style="color:red;">(If no logo is set here it will use the default logo image instead)</mark></em></td></tr><tr><td>Saturation for header</td><td>Determines the saturation for header. Can be from <strong>0%</strong> to <strong>100%</strong>, in <strong>10%</strong> arithmetic increments</td></tr><tr><td>Text (Color)</td><td>Set the color for the text</td></tr><tr><td>Saturation for sticky header</td><td>Determines the saturation for sticky header. Can be from <strong>0%</strong> to <strong>100%</strong>, in <strong>10%</strong> arithmetic increments</td></tr></tbody></table>

#### **Logo**

<table><thead><tr><th width="269">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Logo image</td><td>The logo for your store.<br>Use the logo selector option to set up an image to use as a logo inside the <strong>Header.</strong> The recommended image dimensions are <mark style="color:blue;"><strong>130x30px</strong></mark> (pixels).</td></tr><tr><td>Custom logo width</td><td>Set a size for the logo image between <strong>50px</strong> and <strong>300px</strong> (pixels).</td></tr><tr><td>Desktop logo position</td><td><p>Select the preferred logo position on the header from the dropdown menu:</p><ul><li><strong>Top left</strong></li><li><strong>Top center</strong></li><li><strong>Top center (Special)</strong></li><li><strong>Middle left</strong></li><li><strong>Middle center</strong></li><li><strong>Middle right</strong></li></ul><p><em><mark style="color:red;">(This setting only applies for Header layout style: Classic)</mark></em></p></td></tr><tr><td>Desktop block alignment</td><td><p>Aligns the logo within the block:</p><ul><li><strong>Left</strong> - Aligns the logo to the left of the block.</li><li><strong>Center</strong> - Aligns the logo to the center of the block.</li><li><strong>Right</strong> - Aligns the logo to the right of the block.</li></ul><p><em><mark style="color:red;">(This setting only applies for Header layout style:</mark><mark style="color:red;"> </mark><mark style="color:red;"><strong>Classic</strong></mark><mark style="color:red;">)</mark></em></p></td></tr></tbody></table>

**Navigation**

<table><thead><tr><th width="268">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Menu</td><td>The menu to use for your <a href="../../basic-configuration/navigation#main-menu">main menu</a>. </td></tr><tr><td>Desktop menu alignment</td><td><p>Select the desktop menu alignment on the header from the dropdown menu:</p><ul><li><strong>Left</strong></li><li><strong>Center</strong></li><li><strong>Right</strong></li></ul><p><mark style="color:red;">(</mark><em><mark style="color:red;">Menu alignment is automatically aligned to left on mobile and when the logo position option of <strong>"Middle center"</strong> is selected</mark></em><mark style="color:red;">)</mark></p></td></tr><tr><td>Grid between</td><td>Determine the gap between menu lv-1 in the section.</td></tr><tr><td>Text transform</td><td><p>Select the font style transform of the menu lv-2 and menu lv-3:</p><ul><li><strong>Lowercase</strong></li><li><strong>Capitalize</strong></li><li><strong>Uppercase</strong></li></ul></td></tr><tr><td>Hover effect</td><td><p>Select the hover effect link from the dropdown menu:</p><ul><li><strong>Line</strong></li><li><strong>Dot</strong></li><li><strong>Border</strong></li></ul></td></tr></tbody></table>

**Function group**

<table><thead><tr><th width="266">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Use custom button</td><td>Enable/disable checkbox</td></tr><tr><td>Button label</td><td>The text that displays on the button <br><em><mark style="color:red;">(Leave the label blank to hide the button)</mark></em></td></tr><tr><td>Button link</td><td>Set the link, for example the customer service page</td></tr><tr><td>Icon style</td><td><p>Select the icon style on the header from the dropdown menu:</p><ul><li><strong>Default (icon)</strong></li><li><strong>Default (text)</strong></li><li><strong>Special</strong></li><li><strong>Classic</strong></li><li><strong>Modern</strong></li><li><strong>Dreamy</strong></li></ul></td></tr><tr><td>Enable search 'Desktop/Mobile'</td><td>Enable/disable checkbox</td></tr><tr><td>Enable account 'Desktop/Mobile'</td><td>Enable/disable checkbox</td></tr><tr><td>Enable cart 'Desktop/Mobile'</td><td>Enable/disable checkbox</td></tr><tr><td>Enable wishlist 'Desktop/Mobile'</td><td>Enable/disable checkbox</td></tr><tr><td>Country/region selector 'Desktop/Mobile'</td><td>Adds a selector where a customer can choose the countries and regions that you've enabled in your payment settings, so that customers can view your product prices in the currency of their choice.</td></tr><tr><td>Language selector 'Desktop/Mobile'</td><td>Adds a selector where a customer can choose the countries and regions that you've enabled in your language settings, so that customers can browse your store in the language of their choice.</td></tr><tr><td>Desktop block alignment</td><td><p>Align the function group in the block with the Desktop screen:</p><ul><li><strong>Left</strong></li><li><strong>Center</strong></li><li><strong>Right</strong></li></ul></td></tr></tbody></table>

#### Mobile layout

<table><thead><tr><th width="263">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Mobile logo position</td><td><p>Select the preferred mobile logo position on the header from the dropdown menu:</p><ul><li><strong>Center</strong></li><li><strong>Left</strong></li></ul></td></tr></tbody></table>

#### **Section padding**

<table><thead><tr><th width="263">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Top padding</td><td>Determines the height of the top inner space of the section. Can be from <strong>0px</strong> to <strong>100px</strong>, increasing arithmetically of <strong>1px</strong> (pixel).</td></tr><tr><td>Bottom padding</td><td>Determines the height of the bottom inner space of the section. Can be from <strong>0px</strong> to <strong>100px</strong>, increasing arithmetically of 1px (pixel).</td></tr></tbody></table>