How can I change the opacity and hover function of my mega menu?

[askari4p]

Hi, I wanted to change the colour of my mega menu for the drop down part. Right now it is black. I want it to have a low opacity just like the button in the middle. So that means it is somewhat transparent. Also, is there a way that I don’t have to press the word “SHOP” to see the drop down pages? I want to be able to just hover the text with my mouse to see it drop down?

WEBSITE LINK: https://askari.store/

Thank you!

[ZenoPageBuilder]

Hello @askari4p

In Shopify Admin, you can go to Edit theme code, open file base.css and add this code at the bottom

#HeaderMenu-MenuList-1 {
    background-color: rgba(18, 18, 18, 0.8);
}

The result

Hope it helps!

[Moeed]

Hey @askari4p

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:

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[Anshul_arora]

Hello @askari4p ,

I understand that you are looking to resolve your 2 problems, one is to change the background colour of your submenu and other is to make a hover dropdown effect on your “SHOP” button.

1. The background colour can be change by follow the following steps -:

→ Go to “online store” click on the 3 dots option and then click on “Edit code” https://prnt.sc/bMYhLWJhpAks

→ Next, search for the base.css file, you can see the file under assets https://prnt.sc/aH8gBMbOqBTW

→ Then add the following code

#HeaderMenu-MenuList-1 {
background-color: rgba(10, 10, 10, 0.4);
}

You can see, when I temporarily add the code in your site, then it gives the desired output. https://prnt.sc/7fs_Yb3mLXMl

→ Save the changes.

2. The second problem can be resolved by changing the structure of navigation as the click event from JS is overriding the CSS, so we cannot add mouse hover effect for the dropdown with CSS.

I hope this helps

Please let me know if you need any help from my side.

Thank you.