Hi everyone,
I’m looking to remove the hover effect from the header menu on my home page.
Currently when you hover the cursor over the menu, a coloured background appears, how do I make this transparent or disappear altogether from the page? I would still like a coloured header block to appear on all the other pages, just not on the home page.
Link to store: https://thebespokesignhouse.com/
Let me know if any more info or details are needed.
Many thanks in advance!!
Kris
You need to add this code in the theme files. For which you need to go to Online Store > Actions (Active theme) > Edit Code > Assets, under assets add the code at the bottom of theme-index.min.css file.
.template-index .header-wrapper--overlay.touch-hover:not(.stuck),
.template-index .header-wrapper--overlay:focus-within,
.template-index .header-wrapper--overlay:hover:not(.stuck){
background-color: transparent !important;
}
Please add the following code at the bottom of your assets/theme.index.min.css file.
.template-index .header-wrapper--overlay.touch-hover:not(.stuck), .template-index .header-wrapper--overlay:focus-within, .template-index .header-wrapper--overlay:hover:not(.stuck){
background: transparent !important;
}
Hope this works.
Thanks!
@KrisG2 ,
Follow the screenshots and remove #007AFF and leave it empty and click save.
Simple is that.
This is exactly what I wanted, thank you so much!! It kept the colour on the other pages too as requested. Perfect!
Many thanks again,
Kris
@KrisG2 Glad I could help. Let me know if you face any other issue. Happy selling!
