# Header nav - drawer

{% hint style="info" %}
_\*You should only activate/use one **"Header with Navigation"** that you want. Don't use redundant headers, as they may not optimize performance._
{% endhint %}

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 nav - drawer**
4. . 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>2000px</strong>, increasing arithmetically of <strong>50px</strong> (pixel).</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>Text (Color)</td><td>Set the color for the text<br><em><mark style="color:red;">(Use text color for</mark><mark style="color:red;"> </mark><mark style="color:red;"><strong>transparent header content</strong></mark><mark style="color:red;">)</mark></em></td></tr><tr><td>Background</td><td>Set the background color for this section<br><em><mark style="color:red;">(Use background color for</mark><mark style="color:red;"> </mark><mark style="color:red;"><strong>transparent header content</strong></mark><mark style="color:red;">)</mark></em></td></tr><tr><td>Background opacity</td><td>Determines the saturation for header. Can be from <strong>0%</strong> to <strong>100%</strong>, in <strong>1%</strong> arithmetic increments</td></tr><tr><td>Background blur</td><td>Determines the saturation for sticky header. Can be from <strong>0px</strong> to <strong>20px</strong>, in <strong>1px</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>Middle left</strong></li><li><strong>Middle center</strong></li><li><strong>Middle right</strong></li></ul></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></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>Background 'Free shipping'</td><td>Set the background color for <strong>button 'Free shipping'</strong></td></tr><tr><td>Custom menu</td><td>Set up an custom menu<br><em><mark style="color:red;">(Displays only top-level menu items)</mark></em></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>Special</strong></li><li><strong>Classy</strong></li><li><strong>Fashion</strong></li></ul></td></tr><tr><td>Enable account 'Desktop'</td><td>Enable/disable checkbox</td></tr><tr><td>Enable cart 'Desktop'</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'</td><td>Enable/disable checkbox</td></tr><tr><td>Country/region selector 'Desktop'</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'</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 function group 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><tr><td>Enable search 'Mobile'</td><td>Enable/disable checkbox</td></tr><tr><td>Enable account 'Mobile'</td><td>Enable/disable checkbox</td></tr><tr><td>Enable cart 'Mobile'</td><td>Enable/disable checkbox</td></tr><tr><td>Enable wishlist 'Mobile'</td><td>Enable/disable checkbox</td></tr><tr><td>Country/region selector '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 '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></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>
