How to Center the Menu Items in Dawn, Refresh, Sense & all Other Shopify Free Themes

When it comes to creating an attractive and user-friendly Shopify store, the layout and presentation of your menu items play a significant role. One common design challenge faced by Shopify store owners is centering menu items and the header in themes like Dawn, Refresh, and Sense. In this comprehensive guide, we'll walk you through the step-by-step process of achieving this by editing your theme's CSS and provide you with a video tutorial for visual assistance.

The Solution: Editing base.css

To center menu items and the header in Dawn, Refresh, and Sense themes, follow these simple steps:

Step 1: Access the Theme Editor:

1. Log in to your Shopify admin dashboard.
2. Navigate to "Online Store" and select "Themes."
3. Click on "Customize" for the theme you want to edit.

Step 2: Edit base.css:

1. In the Theme Editor, go to the "Edit Code" section.
2. On the left-hand side, under "Assets," locate and click on "base.css" to open it.

Step 3: Add Custom CSS:

Now, add the following CSS code snippet at the bottom of the "base.css" file:

.header__inline-menu {
position: absolute;
left: 50%;
transform:
translateX(-50%);
} 

Step 4: Save and Publish:

After adding the code, click the "Save" button, and then click "Publish" to apply the changes to your live store.

Video Tutorial: For a visual walkthrough of this process, watch our video tutorial:

Conclusion:

Centering menu items and the header in your Shopify store can significantly improve its appearance and usability. By following these steps and adding the provided CSS code to your theme's base.css file, you'll achieve a clean and professional look for your store.