A Shopify store owner using the Ella theme needs help changing background colors for the search bar, shopping cart, and customer login menus on both desktop and mobile.
Initial Solution:
base.css file targeting search menu, cart menu, and login areas#ff9cdd, #ddc9ff)Follow-up Issue:
Final Resolution:
#f2efdd, #e1dbb9) with border stylingStatus: Resolved. The issue was addressed through iterative CSS customization, with the store owner confirming all background colors now display correctly across the affected menu areas.
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
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:
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:
Thank you so much, its working
