How to move heading text and the button (Dawn Theme)

Store Design
, ,

Topic summary

A user seeks to reposition heading text and a button in the header section of their Shopify store using the Dawn theme, beyond the standard menu options. They provide a screenshot showing their desired layout.

Proposed Solutions:

  • Two developers offer CSS code snippets to be added to the theme.liquid file before the </body> tag
  • The code modifies banner content alignment, padding, and width properties using CSS selectors like .banner__content and .banner__box

Current Status:

  • The original poster asks whether they can adjust text positioning independently within the provided code
  • Another user joins seeking updates, mentioning they’re transitioning from a different theme
  • No confirmation yet on whether the solutions worked or how to customize positioning further

The discussion remains open with unanswered questions about customization flexibility.

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

Thanks in advance!

I am looking to freely move my heading title and the button that is with the header section. How do I go about doing so? I know how to move it within the shopify menu so I’m just trying to see if there is another way.

Example of how I would like it to look:

Screenshot 2024-03-11 115744.png
Screenshot 2024-03-11 115744.png1903×589 212 KB

2

Hello @MMast
Can you share store URL?

3

https://decemberschild.com/

password: dc

4

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

.banner__content.banner__content--middle-center { align-items: self-end !important; justify-content: flex-start !important; } .banner__box { padding: unset !important; } .banner--desktop-transparent .banner__box { max-width: 48rem !important; } h2.banner__heading.inline-richtext.h0 { width: 98%; }

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

5

Hi @MMast ,

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.liquid

Step 3: Paste the below code at the bottom of the file → Save

Hope my solution works perfectly for you!

Best regards,

Oliver | PageFly

2 Likes
6

Is there a way to adjust the text positioning on my own within this code?

2 Likes
7

Any update on this one? Moving from six and trying to get my head around it all!