Dawn Theme: How to make the brandname at the header line smaller?

Store Design

Topic summary

  • Issue: In the Shopify Dawn theme, the brand name in the header wraps to two lines on mobile. The goal was to keep the brand name on a single line.

  • Solution provided: Add a CSS media query targeting screens up to 989px wide to adjust the header link’s width. Specifically, set .header__heading-link to a min-width of 210px so the brand name has enough horizontal space to remain on one line.

  • How to implement: Online Store → Theme → Edit code → Assets → base.css → paste the code at the bottom:
    @media (max-width: 989px) {
    .header__heading-link { min-width: 210px; }
    }
    A media query applies styles only at specified screen sizes.

  • Outcome: The original poster confirmed the fix worked. The discussion is resolved; no further questions remain. Code snippet is central to the solution.

Summarized with AI on February 21. AI used: gpt-5.
1

Hi! How can I make the brandname on the header line smaller? It becomes two lines on mobile phone and I would like to fit all in one line. Thank you so much!

my URL is https://he-cha-ba.myshopify.com

2

Hi @oolongtea2021 ,

You can follow the instruction below:

  1. Go to Online Store->Theme->Edit code
  2. Asset->/base.css->paste below code at the bottom of the file:
@media (max-width: 989px) {
    .header__heading-link {
         min-width: 210px;
    }
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

3

Amazing! Thank you so much!