Shopify themes, liquid, logos, and UX
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:
Desired:
Solved! Go to the solution
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
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
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);
}
Please help me remove this code it will show the background you want.
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
Thank you! It hasn't worked however I've added the code and kept it there if you want to take a look? @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
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
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.
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024