Header menu customize-Dawn theme

Store Design
, , , , , , ,

Topic summary

A user seeks help customizing the header menu in Shopify’s Dawn theme, requesting five specific styling changes:

Requested customizations:

  • Add background hover color to menu tabs
  • Keep menu bar aligned in a single line (prevent wrapping)
  • Enable icon color changes
  • Control logo padding (top/bottom)
  • General styling recommendations

Solution provided:
One respondent delivered CSS code snippets addressing all requests, including:

  • Menu hover effects using .Meteor-DesktopNavigation li:hover
  • Single-line menu with flex-wrap: nowrap
  • Icon coloring via .header__icon
  • Logo padding control with .header__heading-logo

Follow-up issue:
The original poster reported the language bar color wasn’t changing. Additional CSS selectors were provided for both the language bar container and dropdown items.

Status: Resolved. The user accepted the solution and confirmed the fixes are working, with supplementary code provided for the language bar styling.

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

Dear Team,

Thank you for your ongoing support. I would appreciate your help in addressing the following issues related to the header styling:

  1. Add a background hover color to the menu tabs.

  2. Ensure the menu bar is aligned in a single line instead of splitting into two lines.

  3. Enable the ability to change the icons’ color.

  4. Allow control over the padding above and below the logo.

  5. Any additional recommendations for improving the header’s styling are welcome.

Website URL: https://ba0ven-x1.myshopify.com/

Alliance_0-1741901775077.png
Alliance_0-1741901775077.png1920×1080 527 KB

Thank you all

2

Hey in order to fix these issue I need to take a look in your file.

3

Hello, here are all the CSS selection rules you need to add to your theme settings’ custom CSS:

1. Menu tabs hover

.Meteor-DesktopNavigation li:hover {
  background-color: red!important;
}

2. Keeping menu on one line

.Meteor-DesktopNavigation {
    flex-wrap: nowrap!important;
    text-wrap-mode: nowrap!important;
}

3. Coloring the header icons

.header__icon {
    color: red!important;
}

4. Logo padding top and bottom

.header__heading-logo {
  padding-block: 5px!important;
}

Obviously you can change the padding and color values as you please. And if this was helpful to you leave a like, and if it solved your problems than mark as a solution also. Thank you.

1 Like
4

Hey there @Alliance I think you can have a look at this video and it will help you cover a lot of the things you are trying to do for your header menu https://m.youtube.com/watch?v=oX3sXpzRS-g

1 Like
5

Dear Qasim,

Thank you for the effort. It is working. But the language bar still can’t change the color.

6

Thank you for accepting my answer, but I’m not Qasim, was that a mistake?

Regardless, here is the selector for the language bar:

.header-localization:not(.menu-drawer__localization) .localization-form:only-child .localization-form__select {
    color: #ce4523 !important;
}

And for the items inside the language bar:

#HeaderLanguageList li .disclosure__link {
    color: #ce4523 !important;
}

Hope this fixed everything for you.

1 Like
7

Yeap, It is a mistake. Thank you so much Kayakakan, I will try that and share.

1 Like