Styling header text

[CreatorTim]

Hi,

I’d like to remove the hover animation from the header so that when I hover over any menu item, the color doesn’t change. Additionally, I’d like to remove the highlight effect that appears when I’m in a specific section of the header.

I already have a dot decoration added in the header, and I’d like to keep that. I just want to remove the color change on hover and when I’m in a specific section.

After that, I’d like the text to appear slightly more prominent—not fully bold, just subtly emphasized.

Here’s my store URL so you can check how it currently works: https://1049xn-ya.myshopify.com/

I’d like everything to look like it does here: https://tomnoske.store/

Thank you for your help,
Tim

[LizHoang]

Hi @CreatorTim, thanks for your information.

To address the issue, please go to your Theme -> Customize -> Theme settings -> Custom CSS and insert the following code: 

.header__menu-item a {
    text-decoration: none!important;
    color: rgba(var(--color-foreground),.75) !important;
    outline: none!important;
    box-shadow: 0 0!important;
}
.header__menu-item:hover {
    color: rgba(var(--color-foreground),.75) !important;
}
.header__menu-item:not(.caption-large) {
    letter-spacing: normal !important;
}
.global-settings-popup, .header__submenu.global-settings-popup {
    box-shadow: unset !important;
    border: none !important;
}

I hope my solution is helpful to you, please feel free to provide your feedback. 

Liz

[CreatorTim · Accepted solution]

Hey, thank you for the feedback! However, it only works on hover, so for example, when I hover over "HOME," the color doesn’t change. BUT, Also, when I’m in the "HOME" section, it’s still slightly highlighted.

How can I fix this?

You can check it out yourself here: https://1049xn-ya.myshopify.com/

I really appreciate your help.
Tim