Header menu customize-Dawn theme

[Alliance]

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/

Thank you all

[thescriptflow]

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

[kayakakan · Accepted solution]

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.

[Alliance]

Dear Qasim,

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

[kayakakan]

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.

[Alliance]

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

[Bundler-Manuel]

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 

[Retail-Innovato]

Thank you very much for asking this question! I am facing the same issue with header styling, especially with the menu bar alignment and icon color customization. If anyone has found a solution or workaround, I’d really appreciate the guidance. Also, any best practices for improving header design would be helpful!