Desktop menu formatting is not showing in mobile view

Store Design
, , , ,

Topic summary

A user running the Sense theme needed help styling a “SALE” menu item to appear bold and red in mobile view, matching the desktop appearance. Their initial CSS code in base.css and theme.liquid wasn’t working correctly for the mobile drawer menu.

Solutions provided:

  • rajweb identified syntax errors in the original theme.liquid code (invalid “red” property) and provided corrected CSS targeting both #HeaderMenu-sale (desktop) and #HeaderDrawer-sale (mobile) with proper color and font-weight declarations.

  • Moeed suggested adding a <style> block above the </body> tag in theme.liquid with similar CSS rules, including a result screenshot showing the red, bold “SALE” item in mobile view.

  • GTLOfficial recommended adding media-query-wrapped CSS to base.css targeting #HeaderDrawer-shop with color: red !important for screens under 767px.

Outcome: The original poster confirmed one solution worked successfully. The issue was resolved by properly targeting the mobile drawer element with correct CSS syntax.

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

How do I get the mobile view’s menu item to appear the same as my desktop’s? Ie: “sale” to appear bold and red

Screenshot 2025-04-25 075118.png

Screenshot 2025-04-25 075141.png
Screenshot 2025-04-25 075141.png333×344 8.41 KB

This is the code I used under base.css:

#HeaderMenu-shop{font-weight:bold}
#HeaderDrawer-shop{font-weight:bold}
#HeaderMenu-sale{font-weight:bold}
#HeaderDrawer-sale{font-weight:bold}
#HeaderMenu-sale{color:#DC143C;}

and this under theme.liquid:

I’m using Sense theme.

Appreciate the advice.

2 Likes
2

Hey @uc_pharm ,

To make the “SALE” menu item in your mobile menu (drawer) appear red and bold (just like the desktop version), you’ll need to:

Fix the CSS code in theme.liquid:

What you had:

font-weight: bold
red

This is incorrect because red is not a valid CSS property by itself.

Replace with:

The #HeaderMenu-sale targets desktop; #HeaderDrawer-sale targets mobile.

Let me know if you want to make the hover state red too, or if you’re using dynamic menu items that need class-based targeting instead of IDs.

If you want any other tweak with you store please feel free to reach out thanks

Best Regards

Rajat

Shopify Expert

https://rajatweb.dev/

1 Like
3

Hey @uc_pharm

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1745559769254.png
Moeed_0-1745559769254.png340×605 14.1 KB

If I managed to solve your problem then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

1 Like
4

Hello @uc_pharm
Go to online store ----> themes ----> actions ----> edit code ----> base.css
add this code at the end of the file and save.

@media only screen and (max-width: 767px) {
#HeaderDrawer-shop {
  color: red !important;
}
}

result

1 .png
1 .png381×521 15.9 KB

If this was helpful, hit the like button and accept the solution.
Thanks

1 Like
5

Hi @uc_pharm , kindly provide your store URL please and if it is password protected, please share the password as well. Thanks

6

Thank you! This works!