Change menu items font format (color) for both desktop and mobile- Brooklyn Theme

Shopify Discussion

Topic summary

A Shopify store owner using the Brooklyn theme wants to change the font color of a “2 for 1” menu item to #FF7F7F (bold) in both the main navigation and dropdown menu.

Current situation:

  • Desktop styling works with CSS targeting .site-header a[href="/collections/2-for-1"]
  • Mobile version does not display the color change

Solutions provided:

Multiple approaches were suggested:

  • Target mobile menu specifically using #NavDrawer a[href="/collections/2-for-1"] selector
  • Use media queries with @media screen and (min-width: 480px) to differentiate device styling
  • Apply .mobile-nav__item[href="/collections/2-for-1"] for mobile navigation

Resolution:
The user confirmed that the mobile-specific CSS selector worked, acknowledging they need separate code snippets for desktop and mobile menus. Video tutorials were also shared as additional resources.

Summarized with AI on November 25. AI used: claude-sonnet-4-5-20250929.
1

Hi,

I have a Menu item with a “2 for 1” item that is also within a item dropdown called “Shop”.

I would like to change the colour of the “2 for 1” item for both main menu as well as within the dropdown menu item.

I manage to do that by changing the "2 for 1 " collection page color using the following code:

.site-header a[href=“/collections/2-for-1”]
{ color: #FF7f7f !important;
font-weight: bold;}

It works for the desktop version. However, it does not work on the mobile version. Can anyone help me?

I am using the Brooklyn theme and my store URL is https://maresia-pt.myshopify.com/

Thanks

2

Hi @tiagovhp ,

You are on the right path, although since there is a difference between the 2 menus (desktop / mobile). You’ll need to add a CSS code for mobile it to work :face_with_tongue:

#NavDrawer a[href="/collections/2-for-1"] {
  color: #ff7f7f !important;
  font-weight: bold;
}

Hope this helps :slightly_smiling_face:

3

@tiagovhp This migh help youhttps://youtu.be/UGiOu_DP_1Q

4

use media query @tiagovhp for mobile devices

@media screen and (min-width: 480px) {
  
   .site-header a[href="/collections/2-for-1"]
{ color: #FF7f7f !important;
font-weight: bold;}
  }
5

Hello @tiagovhp
This is GemPages - A powerful Page Builder. Regarding your question, I would like to give you some recommendations to support you

Let’s try adding this code under your code :

.mobile-nav__item [href="/collections/2-for-1"] {
color:#FF7f7f !important;
}

Hope my recommendation can works and support for you!
Kind & Best regards!
GemPages

6

Hey @GemPages thanks a lot, that worked. This means everytime I add a piece of code, i need an extra one for mobile?