How to change menu hover colour

[SMP01]

Hi,

I need help to change the menu hover colour to blue. 

See attached image, currently grey.

www.smartmovieprojector.com

thank you 

[BSS-TekLabs]

- Here is the solution for you @SMP01 
- Please follow these steps:

- Then find the theme.css file.
- Then add the following code at the end of the file and press 'Save' to save it.

 

.header .header__menu-wrapper .header__menu-container>li>a:hover {
     color: #00c3ff !important;
}

- Here is the result you will achieve:

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.

[SMP01]

I did this however the sun menu options under  Shop all didn’t work. 

Also the colour didn’t update on mobile menu.

mobile menu contains two menus which is main menu and footer menu in navigation options in shopify.

[niraj_patel]

Hello @SMP01 

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>
  li.header-menu__item a:hover{
     color: #36b7ff !important; 
  }
</style>

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

[SMP01]

Hi I have these codes but the mobile menu hover cover hasnt changed? the hover colour is grey on mobile not blue?

Can you help with that please?

[niraj_patel]

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){
  .drawer__inner-section li.mobile-nav__item a:hover {
      color: #38b6ff !important;
  }
}
</style>

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

[SMP01]

Does that work for iPad users also?

Thank you for the help also very appreciative

[niraj_patel]

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 only screen and (min-width: 768px) and (max-width: 1024px) {

    .drawer__inner-section li.mobile-nav__item a:hover {
        color: #38b6ff !important;
     }

}

</style>

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