How can I disable transparent background header when opening mega menu?

[pearlerwork]

I'm really happy with my navigation customisations, however the only part I'm stuck on is disabling the transparent background header styling when the mega menu is opened. Any ideas? 

Thanks in advance!

Store: https://manifest-a-pearler.myshopify.com/

Password: pearler
Dawn Theme

Current:

Current

Desired:

Desired

[PageFly-Victor]

Hi @pearlerwork 

This is Victor from PageFly - Landing Page Builder App.

You can try this code by following these steps:

Go to Online store => themes => actions => edit code  and add this code on file base.css

body.template-index .header-wrapper{
background-color: rgb(var(--color-background), 1) !important;
}

Hope this answer helps.
Best regards,
Victor | PageFly

[pearlerwork]

Thanks @PageFly-Victor ! This didn't work I'm afraid. Here's my current code I have:

/** 🟒 🟒 🟒 Transparent Header 🟒 🟒 🟒 **/
body.template-index .header-wrapper {
  position:absolute;
  width:100%;
  background-color:transparent;
}

/** 🟒 🟒 🟒 Solid Background on Scroll 🟒 🟒 🟒 **/
.scrolled .header-wrapper {
  transition:1s;
  background-color: rgb(var(--color-background), 1) !important;
  border-bottom: 0.1rem solid rgba(var(--color-foreground), 1); 
}

[PageFly-Victor]

Please help me remove this code it will show the background you want.

[GemPages]

Hello @pearlerwork ,

It's GemPages support team and glad to support you today.

I would like to give you the recommendation to support you so kindly follow the steps below:

1. Go to Online Store > Theme > Edit code of your current theme

2. Open your theme.liquid theme file

3. Paste the below code before </head>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js" integrity="sha512-STof4xm1wgkfm7heWqFJVn58Hm3EtS31XFaagaa8VMReCXAkQnJZ+jEy8PCC/iT18dFy95WcExNHFTqLyp72eQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
$('.mega-menu').each(function(){
    $(this).click(function(){
        if ($(this).find('summary').attr('aria-expanded') == 'true'){
            $('.header-wrapper').addClass('change-bg-custom');
        } else {
            $('.header-wrapper').removeClass('change-bg-custom');
        }
    })
})
</script>
<style>
.header-wrapper {
    transition: 0.3s;
}
.header-wrapper.change-bg-custom {
    background: rgb(var(--color-background), 1) !important;
}
</style>

If you require any further information, feel free to contact me.

Best regards,
GemPages Support Team

[pearlerwork]

Thank you! It hasn't worked however I've added the code and kept it there if you want to take a look? @GemPages 

[GemPages]

Hi @pearlerwork ,

You could please try moving this code to before </body> instead of </head>

<script>
$('.mega-menu').each(function(){
    $(this).click(function(){
        if ($(this).find('summary').attr('aria-expanded') == 'true'){
            $('.header-wrapper').addClass('change-bg-custom');
        } else {
            $('.header-wrapper').removeClass('change-bg-custom');
        }
    })
})
</script>

Best regards,
GemPages Support Team

[pearlerwork]

Thanks - I've moved it but no change! @GemPages 

[GemPages · Accepted solution]

Hi @pearlerwork ,

You still need to have this code before </head>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js" integrity="sha512-STof4xm1wgkfm7heWqFJVn58Hm3EtS31XFaagaa8VMReCXAkQnJZ+jEy8PCC/iT18dFy95WcExNHFTqLyp72eQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

You could please try re-adding it.

Best regards,
GemPages Support Team

[pearlerwork]

@GemPages That's perfect - thanks so much!

[modernhobbit]

hello! I tried to make this work for me, but the change-bg-custom color stays active even when I close the mega menu. I don't have it enabled on my live site, but you can take a look: craefta.studio

You can see I have a nav background on hover, but when the mega menu is open and you moue off the menu, the main nav background reverts to the page background. I want it to stay the hover color when open.