Issue: In a Shopify Dawn theme header, two page links were styled as buttons. Changing the color of one button also changed the other, and the goal was to style each button’s text color individually.
Approach: Use targeted CSS selectors to style a specific header menu item by its ID, enabling independent background and text colors. The key file is base.css in the theme code editor.
Steps: Navigate to Online Store > Theme > Edit code, open base.css, then append CSS rules targeting a specific anchor ID (e.g., a#HeaderMenu-login and its span) to set distinct background and text colors. Save changes.
Outcome: The provided CSS solution worked, and the issue was resolved.
Notes: Images illustrated the current vs. desired button styles. A site link was shared for context.
I have two pages on header i turn them into button, if i change color of 1 page button then second page button text automatically change, I want to make the text color change individually.
you can see this is my result
but i want this this one
this is my website
Hi @anwarrahim
This is Henry from PageFly - Landing Page Builder App
You can try this code by following these steps:
Step 1: Go to Online Store->Theme->Edit code.
Step 2: Search file base.css
Step 3: Paste the below code at bottom of the file → Save
a#HeaderMenu-login {
background: white !important;
}
a#HeaderMenu-login span {
color: black !important;
}
Hope that my solution works for you.
Best regards,
Henry | PageFly
Thank you so much its working
