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

[rrugile]

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!

[NerdCurator]

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

@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;
}

[rrugile]

Unfortunately that did not work...

[NerdCurator]

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

[rrugile]

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

[Made4uo-Ribe · Accepted solution]

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 </body> tag and paste the code below before the tag. 

<style>
#HeaderMenu-christmas-gift-box > span {
        color: #a80000 !important;
        font-weight: bold;
        text-decoration: none;
    }

@media only screen and (max-width: 989px){
a#HeaderDrawer-christmas-gift-box {
        color: #a80000 !important;
        font-weight: bold;
        text-decoration: none;
    }
}

</style>

• And Save. 
• Result:
• 

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

[rrugile]

Thank you! That worked perfectly. Enjoy your coffee!

[Made4uo-Ribe]

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

[mt686]

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!