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

Solved

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

404virtues
Excursionist
22 0 4

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


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


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/

Accepted Solution (1)

Moeed
Shopify Partner
4400 1134 1392

This is an accepted solution.

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 </body> tag

<style>
sticky-header.header-wrapper.color-scheme-1.gradient:hover {
    background: black !important;
    transition: background-color 0.5s ease !important;
}
</style>

RESULT:

Moeed_0-1720537637506.png

 

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

 

Best Regards,
Moeed

Need a Shopify Specialist? Chat on WhatsApp


- Custom Design | Advanced Coding | Store Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️

View solution in original post

Replies 4 (4)

Moeed
Shopify Partner
4400 1134 1392

This is an accepted solution.

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 </body> tag

<style>
sticky-header.header-wrapper.color-scheme-1.gradient:hover {
    background: black !important;
    transition: background-color 0.5s ease !important;
}
</style>

RESULT:

Moeed_0-1720537637506.png

 

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

 

Best Regards,
Moeed

Need a Shopify Specialist? Chat on WhatsApp


- Custom Design | Advanced Coding | Store Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
404virtues
Excursionist
22 0 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!


Moeed
Shopify Partner
4400 1134 1392

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

Need a Shopify Specialist? Chat on WhatsApp


- Custom Design | Advanced Coding | Store Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️

BSSCommerce-TC
Shopify Partner
215 46 49

Hi @404virtues ,

 

1st problem: You need change code at theme.liquid , it belong to <head> 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

 

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.

 

If our suggestions are useful, please let us know by giving it a like, marking it as a solution.


MIDA: Heatmap, Record & Replay |BLOOP Referral Program, Reward |

Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency