Header Menu Items different weight

Store Design
,

Topic summary

A user is experiencing inconsistent font styling between left and right header menu items on their Shopify store. The left menu items appear lighter due to different opacity values.

Root Cause Identified:

  • Left menu items use rgba(255,255,255,0.65) (semi-transparent)
  • Right menu items use rgba(255,255,255,1) (fully opaque)
  • Both share the same font-weight (300)
  • Custom CSS in theme.liquid file is causing the discrepancy

Current Issue:
After removing the problematic CSS code targeting li.header__primary-nav-item a, the opacity issue was resolved. However, a new problem emerged:

  • Text briefly disappears when the mouse leaves the header area
  • The hover transition effect differs between left and right menu items

Status:
The discussion remains open. The user wants to maintain the hover transition effect while eliminating the disappearing text issue when the mouse exits the header. A CSS solution is being sought to achieve both requirements simultaneously.

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

Hi all,

does somebody know how to change the font weight on the left side? They’re different and I don’t know how to change that. There’s a smooth hover effect on both of them but the left ones have a different start style.

www.weartraum.com

pw: traum121

Thanks!
Capture.PNG

2

They are both the same font-weight, 300.

However, menu items on the right are output in white – rgba(255,255,255,1) while on the left they are semitransparent rgba(255,255,255,0.65)

there is a CSS added to your layouts/theme.liquid file:

This is why your menu items on the left look different.

1 Like
3

Hi @weartraum ,

Please go to Actions > Edit code > layout > theme.liquid file, find ‘li.header__primary-nav-item a’ and remove code here:

Screenshot.png
Screenshot.png1132×740 96.4 KB

1 Like
4

This helped! But the problem I have now is that when header is active, the hover effect is different from the right menu titles. You can see that the different between the start and end color is different that on the right ones. Can you check?

5

Hey @bonyecommerce

as you see it worked! But the problem I’m facing right now is - if I leave the header menu with my mouse, the text on the left disappears for a mini-second and goes back to it’s original color. Try it then you’ll see what I mean. Is there a CSS-Fix for that?

Thank you in advance!

6

Yes, but if I remove this code, the hover transition also disappears.

I want the hover transition to be there, but not a transition when leaving header with mouse.