Why is my live site displaying incorrectly?

[ketofoods]

Our site has been live for a couple weeks now, but it is now not displaying correctly when you visit the web address. It looks totally fine in the Theme Editor (see below), but when I view it at the web address, some aspects are not displayed correctly: Very top announcement bar should be grey but appears white, navigation drop down menu is transparent when it should be white, missing buttons, etc.

Correct in theme editor: grey announcement bar and white drop down menu

Incorrect display: whit announcement bar and transparent drop down menu

Can anyone help correct this?

[Zqdo]

Glad to help. Can you share the link to your website?

[BSS-Commerce]

Hi
Can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution if possible.

[ketofoods]

Absolutely: zerobrands.com.

[ketofoods]

Hi, here’s the link: zerobrands.com

[BSS-Commerce]

I’m not sure how your actions led to the incorrect color, but you can try the following steps:

1. Online Store → Themes → Edit code:

2. Find the theme.css file and add this code snippet at the end of the file, then click Save.

.announcement-bar{
    background-color: #f3f3f3;
}
.site-nav__item .megamenu, .site-header{
    background-color: #fff;
}

Result:


Good luck!

[ketofoods]

Thank you for providing this solution! It seems to have solved the problem, so I think I will need to do this to each individual element. The desktop menu colors are correct, but it appears transparent on mobile, any idea how to fix that aspect?

[BSS-Commerce]

Just add this code snippet:

.drawer__contents {
    background-color: #fff;
}

Result:

Good luck!

[ketofoods]

Thank you!