The header menu does not look right on your homepage, and it seems to have some content overlapping when hovering off the menu.
According to website header design's best practices, the transparent header will look best on background elements like image banners or slideshow. If your website layout does not have these elements to be set in the first section, this may be the reason why you experience the problem mentioned above. As you can see in the example below (the image), the Tab collage is set as the first section, and the transparent header menu looks bad when we move the mouse pointer out of the menu.
In this case, we recommend you turn off the transparent header mode to ensure the best display when you have a different first section type rather than a banner or slideshow. This article will show you how to do it.
How to turn off the transparent header
- On your Shopify Admin dashboard, click Online Store > Themes.
- On the Themes page, choose Be Yours theme and click on the theme's button Customize.
- On the left-hand menu of the homepage, click on the Header section.
- In the Header section configuration panel, scroll down to Transparent header, and you can see two options Enable on homepage and Enable on collection pages. Untick one or both of them to solve the problem. Then, click Save.
- As a result, a solid background appears beneath the menu to avoid the overlapped display.
We hope that you find this article helpful! If you have any concerns about this feature, do not hesitate to contact our team for further support.