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.
Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024In today’s interview, we sat down with @BSS-TekLabs to discuss practical strategies for...
By JasonH Nov 13, 2024The year-end shopping spree is around the corner! Is your online store ready for the ...
By JasonH Nov 10, 2024