My cart, search bar and menu all have this transparent sort of tint to it and the search bar glitches into my heading. My cart is fully transparent when it should have a white background. I was fiddling about with some code and this has happened. What can I do?
Topic summary
Main issue: Visual/UI elements in a Shopify store became unintentionally transparent after manual code changes. The cart, search bar, and menu show a transparent tint; the cart loses its intended white background; and the search bar overlaps/glitches into the header.
Context: The problem started after the store owner “fiddled” with theme code. No specific file or change is identified.
Impact: Key navigation and shopping elements are hard to see and function incorrectly, affecting usability.
Attachments: A screenshot is provided and appears central to understanding the visual glitch.
Status: No fixes or responses yet; the user is seeking guidance. The discussion remains open with unanswered questions about which code changes caused the transparency and overlap.
Next steps (implied by the request): Identify and revert recent code edits or request guidance on restoring background styles and preventing overlap (e.g., header/search styling), but no concrete actions have been proposed in-thread.
1 Like
Paste this code in the end of main.min.css file.
form#cart {
background: white;
}
I can’t find this file, what would it be under?
Hi,
You have CSS that is adding a transparent background to it.
Two options to fix it:
1 - Go to your edit code, try to find this file here: component-cart-drawer.css, if you find it, try to find this: .mini-cart__inner. Replace the background-color line with the actual color you want.
2 - Open Edit Theme and find the Custom CSS piece:
add this line of code there:
.mini-cart__inner {background-color: white !important;}3 - Try to find if there is any configuration on your theme that has a background settings.
I recommend starting with #3 and if it doesn’t work, #1.
Please let me know if you need additional help.