Ella theme - mobile search menu background color change

Solved

Ella theme - mobile search menu background color change

kashifjohn
Shopify Partner
28 3 9

Hi, I need your help again, could you please guide me how can i change the color of these 

1- Search bar menu color on desktop and mobile
2- Shopping cart menu on desktop and mobile

3- Customer accounts login menu on desktop and mobile

 

Store URL : https://ndympeslhzz4qfzr-56680546493.shopifypreview.com

 

meldmedia_0-1717404972416.pngmeldmedia_1-1717404979285.png

 

Ecommerce master
Accepted Solutions (2)

Spac-es
Shopify Partner
390 112 141

This is an accepted solution.

Add this code in your base.css file:

/* Search bar menu */
.sticky-search-menu-open .header-nav-plain .search-modal__form,
.quickSearchResultsWrap,
.products-grid.column-3.disable-srollbar,
.quickSearchResultsBlock .search-block-title .text {
  background-color: #ff9cdd !important;
}
/* Shopping cart menu */
.halo-sidebar-wrapper.custom-scrollbar,
.halo-sidebar-header.text-left {
  background-color: #ff9cdd !important;
}
/* Without access to the login menu */

Change the color to whichever one you prefer!

 

Result:

cart-backcolor.PNG

 

search-backcolor.PNG

 

Any donation is welcome! https://www.buymeacoffee.com/spacescoffee Thanks in advance!

View solution in original post

Spac-es
Shopify Partner
390 112 141

This is an accepted solution.

 

Also add this code to your base.css file:

.toolbar .toolbar-dropdown .label-tab,
.form-input, .field__input,
.bundlePdItem-container,
.dropdown-menu.hidden-on-desktop,
.search-modal__form {
  background-color: #f2efdd !important;
}
.toolbar .dropdown-menu.hidden-on-desktop .dropdown-menu-body li.is-active {
  background-color: #e1dbb9 !important;
}
.search-modal__form {
  border: 1px solid #a3470b !important;
}

Result:

transparent-color.PNGtransparent-color2.PNG  transparent-color3.PNG     

transparent-color4.PNG  transparent-color5.PNG

 

Any donation is welcome! https://www.buymeacoffee.com/spacescoffee Thanks in advance!

View solution in original post

Replies 4 (4)

Spac-es
Shopify Partner
390 112 141

This is an accepted solution.

Add this code in your base.css file:

/* Search bar menu */
.sticky-search-menu-open .header-nav-plain .search-modal__form,
.quickSearchResultsWrap,
.products-grid.column-3.disable-srollbar,
.quickSearchResultsBlock .search-block-title .text {
  background-color: #ff9cdd !important;
}
/* Shopping cart menu */
.halo-sidebar-wrapper.custom-scrollbar,
.halo-sidebar-header.text-left {
  background-color: #ff9cdd !important;
}
/* Without access to the login menu */

Change the color to whichever one you prefer!

 

Result:

cart-backcolor.PNG

 

search-backcolor.PNG

 

Any donation is welcome! https://www.buymeacoffee.com/spacescoffee Thanks in advance!
kashifjohn
Shopify Partner
28 3 9

Thank you so much its working but i can see few spaces are still showing white 

 

 

 meldmedia_0-1717412752032.png

meldmedia_1-1717412851000.png

meldmedia_2-1717413082374.pngmeldmedia_3-1717413113932.pngmeldmedia_4-1717413134397.pngmeldmedia_5-1717413143323.png

 

 

Ecommerce master
Spac-es
Shopify Partner
390 112 141

This is an accepted solution.

 

Also add this code to your base.css file:

.toolbar .toolbar-dropdown .label-tab,
.form-input, .field__input,
.bundlePdItem-container,
.dropdown-menu.hidden-on-desktop,
.search-modal__form {
  background-color: #f2efdd !important;
}
.toolbar .dropdown-menu.hidden-on-desktop .dropdown-menu-body li.is-active {
  background-color: #e1dbb9 !important;
}
.search-modal__form {
  border: 1px solid #a3470b !important;
}

Result:

transparent-color.PNGtransparent-color2.PNG  transparent-color3.PNG     

transparent-color4.PNG  transparent-color5.PNG

 

Any donation is welcome! https://www.buymeacoffee.com/spacescoffee Thanks in advance!
kashifjohn
Shopify Partner
28 3 9

Thank you so much, its working 

Ecommerce master