Mobile Menu + Sign Hover Colour

Hi,

I would like to change the colour of the + sign on my mobile menu when hovering around. Currently it is set to the default pink and I would like it to be #FA7268 when hovered.

My site is www.additive3dasia.com.

Thank you in advance for your help!

Regards,
Stella

Hi Stella,

Thank you for contacting us.

Try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

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

      .main-navigation ul li:hover .subnav-toggle::before {
        color: #FA7268 !important;
      }
      
    }

I hope this reply helps.

Stay safe.
Have an excellent day :slight_smile:

Regards,
Kharis
aThemes Support

Hi Kharis,

Works perfectly, thank you!

Additionally, when I am on a certain page on mobile, the page itself on the mobile menu is highlighted as the default pink as well. Is there a way to change it to the same colour #FA7268 as well?

Thanks so much!

Best Regards,
Stella

Hi Stella,

Replace the code I suggested in my previous response to this:

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

      .main-navigation ul li:hover .subnav-toggle::before {
        color: #FA7268 !important;
      }
      .main-navigation ul li a:hover, 
      .main-navigation ul li.current_page_item > a, 
      .main-navigation ul li.current-menu-item > a, 
      .main-navigation ul li.current_page_ancestor > a, 
      .main-navigation ul li.current-menu-ancestor > a {
        color: #FA7268; 
      }
      
    }    

I hope this reply helps.

Stay safe.
Have an excellent day :slight_smile:

Regards,
Kharis
aThemes Support

Hi Kharis,

It’s working just as I wanted. :slight_smile:

Thank you once again for your help!

Regards,
Stella

Hi Stella,

Thank you for updating me.

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis
aThemes Support