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

404virtues · ‎07-09-2024

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.

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).

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/

Moeed · ‎07-09-2024

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:

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 ✅

- Get a quick Shopify quote – Click here!

- Custom Design | Advanced Coding | Store Modifications

View solution in original post

Moeed · ‎07-09-2024

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:

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 ✅

- Get a quick Shopify quote – Click here!

- Custom Design | Advanced Coding | Store Modifications

404virtues · ‎07-09-2024

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 · ‎07-09-2024

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 ✅

- Get a quick Shopify quote – Click here!

- Custom Design | Advanced Coding | Store Modifications

BSSCommerce-TC · ‎07-09-2024

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; }

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

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