Sticky header has no color when scrolling

Daniel19901
Shopify Partner
139 0 16

Hi, for some reason my header became transparent for stick mode (while scrolling) as well. Can anyone help me set a color as background when scrolling ? 

 

It is not from the settings.. not sure what happened. It was fine until now 

 

https://cbh9cs8hom6nk645-75482267975.shopifypreview.com

Replies 4 (4)

BSSCommerce-HDL
Shopify Expert
747 246 255

Hi @Daniel19901, Pls insert this code to your file css: 

body:has(.scrolled-past-header) sticky-header.header-wrapper {
   background-color: #e5d9d9 !important;
}

Here is result: 

BSSTechVenture_0-1715955418469.png

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
Daniel19901
Shopify Partner
139 0 16

@BSSCommerce-HDL thank you so much!! which css file should i add it to ?

BSSCommerce-HDL
Shopify Expert
747 246 255

Hi @Daniel19901Search file base.css ,theme.css or style.css. After, let's try add it

BSSTechVenture_0-1715958791751.png

 

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

 

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

conversionist
Shopify Partner
55 7 9

 

Hi! You can fix the transparent header issue in sticky mode by adding some custom CSS. Here’s how:

 

  1. Go to Online Store > Themes > Actions > Edit Code
  2. In the Assets folder, open your theme.scss.liquid or theme.css file.
  3. Add this code at the end

 

.header--sticky {
    background-color: #yourcolor !important;
}
​

 

Replace #yourcolor with your desired background color code

Save the changes and refresh your site to see the effect This should set a background color for the sticky header

Building 100 Shopify apps for that BMW M5 dream

Follow the journey at https://www.youtube.com/@conversinist
https://conversionist.online/