How to make the header transparent on mobile

Store Design
1

IMG_6862.jpeg
IMG_6862.jpeg1179×214 14.4 KB

How can I make the header transparent only when on the banner section on mobile.

2

Hi, @omar_ab

Please share the store URL so that I can assist you.

1 Like
3

MoroccanPlus.com

4

Hi @omar_ab ,

Please go to Actions > Edit code > Assets > theme.css file and paste this at the bottom of the file:

.site-header {
    background: transparent !important;
    box-shadow: none !important;
    position: fixed;
    top: 50px;
    width: 100%;
    z-index: 9;
}
.site-header--sticky.active {
    top: 0 !important;
}