Justify menu items for desktop in dawn theme

Store Design
, , ,

Topic summary

A user seeks to justify (evenly distribute) menu items across the full width of the header in Shopify’s Dawn theme for desktop view.

Solutions Proposed:

Two approaches were offered by different responders:

  1. CSS-only solution (recommended for minimal impact):

    • Add CSS to base.css file
    • Target .header__inline-menu .list-menu--inline with justify-content: space-between and width: 100%
    • This approach affects only the menu area

  2. Alternative method:

    • Edit theme.liquid file
    • Add markup code before the closing </body> tag

Status: Multiple working solutions provided with step-by-step instructions. One responder requested the store URL for more specific guidance. The issue appears resolved with CSS being the cleaner implementation.

Summarized with AI on November 5. AI used: claude-sonnet-4-5-20250929.
1

Hi,
In Dawn theme, I need to justify menu items on desktop view.
Can you help me please? Check the attachment.

Thank you
Stefano

Screenshot-2024-09-22-alle-15.17.40.jpg
Screenshot-2024-09-22-alle-15.17.40.jpg2270Ă—438 63.4 KB

1 Like
2

Hi @visivastudio

Would you mind sharing your store URL? Thanks!

3

@visivastudio , you want this?

BSSCommerceB2B_1-1727015764287.png
BSSCommerceB2B_1-1727015764287.png1214Ă—127 12.5 KB

Follow this step

Step 1. Go to Admin → Online store → Theme > Edit code

Step 2. Find the file theme.liquid.

Step 3. Add this code above
4

Hello, If you insert this css it will not impact other area. This only work in menu.
Step 1: Navigate to your Shopify admin panel and go to “Online Store.”

Step 2: Click on “Themes” and then select Edit code

Step 3: Find base.css

nav.header__inline-menu>ul.list-menu.list-menu--inline {
    justify-content: space-between !important;
    width: 100%;
}

Arif_Shopidevs_0-1727021415101.png
Arif_Shopidevs_0-1727021415101.png2572Ă—276 31.2 KB

Hope it will work.