Will buy you a coffee: (DAWN) change menu item colour problem at screen widths over 2000px

Store Design
, ,

Topic summary

Issue: A Dawn theme menu item (“Christmas Gift Box”) was styled via CSS but only applied between 990–1999 px; other widths reverted to default.

What was tried:

  • Placing the CSS rule (#HeaderMenu-christmas-gift-box > span) at the end of base.css.
  • Removing earlier, conflicting/duplicate rules identified by line number in a screenshot.
  • An alternative suggestion to insert CSS before in theme.liquid, with screenshots showing the expected result.

Root cause and fix:

  • A missing closing curly brace in the CSS caused rules to fall under unintended scopes/breakpoints, leading to inconsistent behavior. After closing the brace and removing conflicting code, the custom style (color, bold, no underline) applied across all screen sizes.

Outcome:

  • Resolved. The menu item now displays correctly at all widths; the original poster confirmed and expressed thanks.

Other notes:

  • Screenshots were central for identifying conflicting lines and demonstrating results.
  • A WYSIWYG app (EasyEdits) was suggested as an optional, code-free way to apply per-screen-size edits.
Summarized with AI on December 12. AI used: gpt-5.
1

Dear Shopify Community,

I’m currently editing my Dawn theme and need help with customising a menu item (“Christmas Gift Box”) that links directly to a product.

I’ve added code to customise the menu, but the changes only apply between 990px and 1999px. For other screen sizes, the website reverts to the default style. I need the changes to apply universally.

Here’s the code I currently have in base.css (only works for 990px ≤ screen width ≤ 1999px):

/* Change Christmas gift box menu item color, font weight, and remove underline*/
#HeaderMenu-christmas-gift-box > span {
    color: #a80000;
    font-weight: bold;
    text-decoration: none;
}

Website: https://meowplaza.com/

As a thank you, I’d love to buy a coffee for the person who helps me with a solution!

Thank you in advance!

1 Like
2

@rrugile Replace the code shown in the screenshot with the code given below at the end of base.css

Screen Shot 2024-12-06 at 12.22.15 AM.png
Screen Shot 2024-12-06 at 12.22.15 AM.png1163×415 37 KB

@media (max-width: 1199px){
.new-arrivals-product .wrapper-compare {
    display: none !important;
}
}

/* Change Christmas gift box menu item color, font weight, and remove underline*/
#HeaderMenu-christmas-gift-box > span {
    color: #a80000;
    font-weight: bold;
    text-decoration: none;
}
1 Like
3

Unfortunately that did not work…

4

@rrugile You haven’t removed the previous code. Please check the screenshot below. Please remove the code shown in line no. 3537 to 3540.

Screen Shot 2024-12-06 at 12.32.45 AM.png
Screen Shot 2024-12-06 at 12.32.45 AM.png1339×579 68.8 KB

1 Like
5

Hi @rrugile

Try this one.

  • From your Shopify admin dashboard, click on “Online Store” and then “Themes”
  • Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  • In the “theme. Liquid” file. Find the tag and paste the code below before the tag.

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!

1 Like
6

Oh I see now! The curly brace was not closed. Thank you for checking my code :sweat_smile: I’d like to get you a coffee! Please send me your link.

7

Thank you! That worked perfectly. Enjoy your coffee!

8

Welcome, and thank you for the tips! I definitely will.

9

Hi there! It looks like plenty of folks have already shared some code for you to try. Normally, I’d add another option for you, but I think you’ve got enough to work with already, haha. Instead, I just wanted to mention EasyEdits, an app I created that works like a WYSIWYG editor. It lets you click on elements and make changes—like adjusting color—without needing any code. You can edit on different screen sizes & apply edits only to those sizes.

You can even make your edits during the free trial and keep them after uninstalling, without paying anything!

Let me know if you decide to give it a try or if there’s anything I can help with. Best of luck!