Re: Solid header background on megamenu open

Solved

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

pearlerwork
Shopify Partner
76 1 10

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:

CurrentCurrent

 

Desired:

DesiredDesired

Accepted Solution (1)
GemPages
Shopify Partner
5625 1262 1251

This is an 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

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center

View solution in original post

Replies 10 (10)

PageFly-Victor
Shopify Partner
7865 1786 3108

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
Shopify Partner
76 1 10

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
Shopify Partner
7865 1786 3108

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

PageFlyVictor_0-1673320092599.png

 



PageFlyVictor_1-1673320092673.png

 

 

GemPages
Shopify Partner
5625 1262 1251

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

GemPages_0-1673325864190.png


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

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center
pearlerwork
Shopify Partner
76 1 10

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
Shopify Partner
5625 1262 1251

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

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center
pearlerwork
Shopify Partner
76 1 10

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

GemPages
Shopify Partner
5625 1262 1251

This is an 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

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center
pearlerwork
Shopify Partner
76 1 10

@GemPages That's perfect - thanks so much!

modernhobbit
Visitor
2 0 1

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.