How to make transparent header with a mega menu non transparent when hovering over it

Store Design
1

Hi again,

I decided I want to use a mega-menu and my header is coming along nicely. I have it set for it to be transparent but when scrolling down it goes back to it’s default color (black).

I just have two issues:

The first is when clicking a menu option within the header, the header remains transparent.

404virtues_0-1720536707658.png
404virtues_0-1720536707658.png2227×227 71.3 KB

However, I would like the background to change to it’s default color (black) when hovering the mouse over the header; looking like this (This is what it looks like when I have scrolled down the page and the header has changed back to it’s default color).

404virtues_1-1720536800775.png
404virtues_1-1720536800775.png2229×244 27.8 KB

The second problem, if you have enough time.

Is how can I make it so when you hover the mouse over a menu option the drop down box is automatic, rather than needing the user to click it? I’ve been trying to use tutorials from YouTube but they haven’t worked on my theme,

My website is: https://404virtues.com/

2

Hey @404virtues

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:

Moeed_0-1720537637506.png
Moeed_0-1720537637506.png1904×953 136 KB

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

Best Regards,
Moeed

1 Like
3

Hi @404virtues ,

1st problem: You need change code at theme.liquid , it belong to section ( as shown in figure ) , please replace

.scrolled-past-header sticky-header { background: #121212 !important; }

to

.scrolled-past-header sticky-header:hover { background: #121212 !important; }

BSSCommerceTC_0-1720538652777.png
BSSCommerceTC_0-1720538652777.png827×186 10.6 KB

2st problem: You need to make a few adjustments to your theme to achieve this. If you need assistance, contact us and then we can help you.

4

Awesome that worked perfectly,

Would you know what to do for the second part since you’re here and amazing. Is it possible to have the menu drop down when the mouse hovers over it rather than clicking it. I’ll buy you a coffee for your time!

5

Hey @404virtues

For the second problem, since it’s not only possible with CSS only and will require some changes in your theme files so you will have to hire a Shopify developer who can help you out with that, if you’re not familiar with coding. Feel free to let me know if you want me to help you out with this problem and I will be more than happy to help you out with it.

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

Best Regards,
Moeed

1 Like