Change 'Sale' menu item to Red on Mobile - Prestige theme

Change 'Sale' menu item to Red on Mobile - Prestige theme

afwanfhaider
Tourist
7 0 2

Hi community!

 

Managed to change the colour for the desktop site using this code:

.header__primary-nav-item[data-title="Sale"] {
color: red;
}

 

But it won't change on the mobile site.

 

Also, I would like to increase the font-size of just the header text on desktop.

Somebody please help me, I've been at this all day 😞

 

Here is my website:

https://f88bei6t0vhno2hm-77605110095.shopifypreview.com

Replies 3 (3)

niraj_patel
Shopify Partner
2378 514 506

Hello @afwanfhaider 

You can add code by following these steps 

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid


<style>

    

@media screen and (max-width:767px){

  .header-sidebar__scroller li:last-child {
      color: #ff0000 !important;
  }
  .header-sidebar__scroller .h6 {
     font-size: 18px !important;
   }
}

</style>

techlyser_web_0-1704997692769.png

 

Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- [email protected]
afwanfhaider
Tourist
7 0 2

Hi @niraj_patel 

Thank you for your solution! The color change worked, but I wanted to change the desktop font-size, not the mobile.

Any suggestions?

Much appreciated!

niraj_patel
Shopify Partner
2378 514 506

Hello @afwanfhaider 

You can add code by following these steps 

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid


<style>

     @media screen and (min-width: 990px){
        #shopify-section-sections--20237087506767__header li.header__primary-nav-item a {
               font-size: 20px !important;
        }
       #shopify-section-sections--20237087506767__header li.header__primary-nav-item summary {
            font-size: 20px !important;
        }
   }

</style>

techlyser_web_0-1705050160471.png

 

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.
Thanks

Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- [email protected]