Before we go to the header settings, please note that you have to change the general theme settings for the header.
Then go to the Header subsection.
Header subsection
With the sections's settings it is possible to:
- Show the header section in full width.
- Change the logo image.
- 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.
- Show language and country selectors.
- Enable the sticky header to make the header show when users scroll up.
- Show border for search field to display search field outline.
- Show the box shadow at the bottom.
Then you can edit the Top navigation menu. With the Navigation settings, it is possible to:
- 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.
-
Show the Collection icon in the dropdown content.
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.
- Activate the top-level menu on Click. The default menu behavior is activated on hover.
- Enable dropdown menu animation. The feature helps you to animate the dropdown content smoothly.
- Configure mega menu settings.
- Show overlay for Megamenu. You have to enable the overlay first in the Theme Settings Overlay section.
- Use the 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.
-
Change 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.
Comments
0 comments
Please sign in to leave a comment.