Help with store design

[LovAri]

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?

[akshay_bhatt]

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:

1. Go to the Theme Code Editor:

   • From your Shopify Admin, navigate to Online Store > Themes.
   • In your current theme, click on Actions > Edit Code.

2. 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 */
}
​

1. 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

[LovAri]

Hey akshay thanks for the help, I was actually able to figure out the icon colors but Im still stuck on how to make the search bar black when I click on it. I have attached images of what it looks like now and what I want it to look like