How to Center my Multicolumn Header - Dawn Theme

Store Design
, ,

Topic summary

A user seeks help centering a multicolumn header in the Dawn theme, which is currently left-aligned.

Solutions Provided:

Two CSS approaches were offered:

  1. Padding method: Add left and right padding of 41% to .title-wrapper-with-link class
  2. Text-align method: Set width to 100%, text-align to center, and display to block on the same class

Both solutions target the Custom CSS section in the theme customizer.

Outcome:

Multiple users confirmed success with these solutions, particularly praising their simplicity compared to more complex snippet-based approaches found in other forums. The issue appears resolved with straightforward CSS additions.

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

How do I center my multicolumn header (Screenshot Below) right now it’s aligned to the left.

Link… (Drive Scent Diffuser – The Car Flame Diffuser (shopifypreview.com)

Password: go2253

Drive Scent Screenshot.png
Drive Scent Screenshot.png1920×725 147 KB

1 Like
2

Hi @rvernon23 ,

Try this.

.title-wrapper-with-link.title-wrapper--self-padded-mobile.title-wrapper--no-top-margin {
    padding-left: 41%;
    padding-right: 41%;
}

Result:

Ribe_Dagandara_0-1687123468393.png
Ribe_Dagandara_0-1687123468393.png1234×412 255 KB

I hope it help.

3

Hi @rvernon23

Add the following code under your Custom CSS section inside your theme customiser:

.title-wrapper-with-link.title-wrapper--self-padded-mobile.title-wrapper--no-top-margin {
    width: 100%;
    text-align: center;
    display: block;
}

That should do the trick! Let us know!

9 Likes
4

To Where?

5

Honestly, thank you so much! I’ve been through about 6 different forums telling me to put a snippet code into the theme.liquid and nothing worked. Yours solved my problem perfectly, so thank you kind sir :heart:

6

Worked PERFECTLY!! So easy! Just added to the custom css on the section! Thank you!!!