A user sought help removing an unwanted outline box appearing around their store’s hover mega menu. They had tried multiple solutions without success and provided comparison images showing the desired appearance versus the current boxed display.
Solution provided:
.header.header-menu .mega-menu__content { border: none !important; }The solution successfully resolved the issue, with the original poster confirming it worked perfectly.
Hi,
How can I remove the outline box from the hover over mega menu please? Tried a lot of solutions here but to no avail.
Examples attached - one without the box which I want, and how it displays now with the box.
website: https://ravenwood.store/
password: peuwey
Hello @Ravenwoodstore
To remove the border from the megamenu box, you just need to follow below steps:
Go to admin > Online store > edit code.
In code directory, find the file named “component-mega-menu.css” and open it.
Copy below mention css and paste it at the end of the above mention file.
.header header-menu .mega-menu__content {
border: none !important;
}
Hope this code works for your issue.
if this solution helpful to you then make it as solved and like the solution.
Best regards
Worked perfect! Thank you!