Styling header text

Store Design
, , , ,

Topic summary

Goal: Make the Shopify header menu keep its dot decoration, remove color changes on hover and on the active (current page) item, and make text slightly more prominent without full bold. Reference look: tomnoske.store; live site provided for testing.

Proposed fix: A helper suggested adding Custom CSS in Theme settings to neutralize hover effects and styling, including color set to rgba(var(–color-foreground), .75), removing text-decoration, outline, and box-shadow, normalizing letter-spacing, and removing popup box-shadows/borders. The code snippet is central to the discussion.

Outcome: The hover color change was successfully removed. However, the active/current page menu item (“HOME” when on the home page) still appears highlighted.

Status and next steps: The request remains partially resolved. Additional CSS is needed to target the theme’s active/current menu item state (the class applied to the selected menu item) to remove its highlight while preserving the dot decoration and subtle text emphasis. No final solution for the active state has been provided yet; discussion ongoing.

Summarized with AI on December 12. AI used: gpt-5.
1

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

2

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

3

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