Currently, my header is transparent and all white icons and pages, when I click on the search bar nothing shows up because the scheme is white, how can I fix this while keeping everything else the same?
Topic summary
A user is experiencing visibility issues with their store’s transparent header design. The search bar and icons are white, making them invisible when the search bar is activated due to the white color scheme.
Initial Problem:
- Transparent header with white icons and text
- Search bar content not visible when clicked (white on white)
- User wants to maintain the transparent header design
Solution Provided:
A CSS fix was suggested to target the search bar specifically:
- Add custom CSS to the theme’s stylesheet (theme.css or base.css)
- Apply a semi-transparent dark background to
.search-bar-inputwhen active - Change text color to black (#000) for visibility
- Adjust placeholder text and icon colors to darker shades (#333)
- Add subtle border for better definition
Current Status:
The user successfully fixed the icon colors but still needs help making the search bar background appear black when clicked. Images were attached showing the current state versus the desired appearance, though the discussion remains ongoing.
Hi @LovAri ,
To fix the issue with your transparent header and white icons while keeping the header appearance consistent, you can add custom CSS to specifically target the search bar background and icon color when it’s active. Here’s how:
-
Go to the Theme Code Editor:
- From your Shopify Admin, navigate to Online Store > Themes.
- In your current theme, click on Actions > Edit Code.
-
Add Custom CSS:
- In the Assets folder, open your main CSS file (often named theme.css or base.css).
- Add the following code at the bottom of the file:
/* Adjust background for search bar when clicked */
.search-bar-input {
background-color: rgba(0, 0, 0, 0.1); /* Light background for visibility */
color: #000; /* Text color */
}
/* Change color for search icon and text */
.header-icon-search,
.search-bar-input::placeholder {
color: #333; /* Darker color for visibility */
}
/* Optional: Change the border to make it more visible */
.search-bar-input {
border: 1px solid rgba(0, 0, 0, 0.2); /* Subtle border */
}
-
Save and Preview:
- Save the changes and refresh your site to check that the search bar and icons are now visible when clicked.
This will maintain your transparent header while ensuring the search elements are more visible.
Got it! If you found my suggestions helpful, please consider liking or marking it as a solution.
Your feedback is appreciated! If you have any more questions or need further assistance, just let me know.
Thanks & Regards
Akshay Bhatt
