How can I change the background and search bar color in Dawn theme on mobile view?

Technical Q&A
1

I currently have the dawn theme for my Shopify store. I need to change the color for the background and the search bar for the mobile view. I have tried everything and still have no success. Please help

2

Hi,

regarding the background you can change the color from Theme Settings. You can find it in Secondary colors section (red in the screenshot).

About Search Bar in mobile view what you need to change? If is the background color of the Search input field, there is no specific setting that you can modify. You need to add some specific code.

For example by adding this CSS at the end of file component-search.css or to any custom CSS file you would like to include in your layout.

@media screen and (max-width: 480px) {
  .search__input.field__input {
    background-color: red;
  }
}
3

Hi @sekiya06 ,

Go to Assets > base.css and paste this at the bottom of the file:

@media only screen and (max-width: 749px){
	/* background */
	details[open] .modal-overlay::after{
		background-color: #000 !important;
		opacity: 0.5;
	}
	/* search bar */
	.search-modal{
		background: #f0f0f0 !important;
		border-bottom-color: #f0f0f0 !important;
	}
}

Hope it helps!

4

How do I change the orange section? See attachment for screenshot of the problem.

5

Hi @sekiya06 ,

Go to layout > theme.liquid file, find ‘theme-color’ and change content.

Screenshot.png
Screenshot.png1031×366 30.8 KB

If it helped you solve your issue, please mark it as a solution. Thank you and good luck.