Header section

Before we go to the header settings, please note that you have to change the general theme settings for the header.

The Charge themes Header includes the Top bar (since 3.0.0 version), Header, Icons bar, and Breadcrumbs sections.

Let's go to the Header subsection. 

Header subsection

Within the configuration, it is possible to:

• Show the header section in full width.
• Set the container width.
• Change the logo image.
• Set the logo width on the desktop and the mobile separately.
• Justify the logo. The available values are Start, Center, and End.
• Center logo on mobile.
• Display the Shop name on small screens (tablet and mobile). Use the option if your store logo image is bulky. When enabled, the logo image will be hidden, and the search icon with your store name will be shown in one line. 

Advanced settings of the Header

• Enable the sticky header to make the header show when users scroll up.
• Show language and country selectors. 

Note: You should set up the languages in the Shopify configuration first. 

• Show switcher language flag.
• Show border for search field to display search field outline.
• Show a border for a search field.
• Show item menu dividers.
• Show the box shadow at the bottom.
• Show social media in the header box.
• Show navigation line divider. Notice that the option is disabled for the Slideout menu. 
• Show icons line divider.

Navigation settings

Start editing the Top navigation menu. Here, it is possible to set up different menus. The first Menu enables a Slideout menu. There will be shown the famous hamburger menu icon that consists of three horizontal lines stacked on top of each other. The initially hidden menu will slide out from the side of the screen.

The Menu 2 enables a horizontal menu available on the desktop only.

• Choose the Menu type between Combined, Navigation, and Slideout.

Note: If you select the Combined value in the Menu type, you can show both slideout and horizontal menus at the same time.

• Choose a dropdown menu type. Possible values are Megamenu / Small menu. If you choose a Megamenu, you have to modify the dropdown menu elements.

The Charge theme mega menu looks like this:

• Specify the names of items on either the mega menu or the small menu.
• Apply the layout width. The option is available for the mega menu items listed.
• Show top level items menu in uppercase.
• Activate top-level menu on hover or on click.
• Highlight the first menu item permanently on desktop devices.
• Enable dropdown menu animation.
• Show menu overlay.
• Show collection icon in the dropdown content. You have to select the icon and set its width.

Note: To show a menu like this, please enable the Show Collections image option in the Header section. It will display collection icons next to the collection names. You can also use the same icon for each collection menu item, change the icon's width, and set the items' alignment between Center and Normal.

• Choose the items alignment between Normal and Center. 
• Show collection image for the small menu.
• Select the image.
• Set the number of main items per row for the megamenu.
• Show the link Shop all.
• Limit the number of categories to be shown.

The Charge theme also allows for changing the menu position in Shopify by adding custom styles. So you will place the last top navigation menu items on the right side in the desktop design. 

Shopify added custom CSS for every section within the recent platform update. 

When you customize your navigation in Shopify, you might want to set the last menu items aligned to the right. For our case, we will place the utmost top navigation menu items on the right side of the desktop design. Follow the next steps:

• Go Online Store - Themes. 
• Click Customize. 
• Choose the Header section. At the bottom of the section properties panel, you can see a Custom CSS field. Add the following code:

.list-menu--inline > li:nth-child(3) { margin: 0 auto 0 0; }

• Click Save.  

All these steps will push all top menu items after 3rd one to the right.

Now you can go to the Navigation menu article. It offers you lots of opportunities to show different content in the dropdown.