transparent announcement bar

Solved

transparent announcement bar

stride
Tourist
13 0 0

Hi, 

 

I'm trying to make my annoucement bar transparent but nothing works. The site's url is stridedrinks.com.

Accepted Solution (1)

CodingFifty
Shopify Partner
590 89 110

This is an accepted solution.

Hi @stride,


Go to Online Store, then Theme, and select Edit Code.
Search for base.css/theme.css/style.css/main.css/custom.css file Add the provided code at the end of the file.

 

 

 

div#shopify-section-sections--22799632531782__announcement-bar {
    position: absolute;
    width: 100% !important;
}

#shopify-section-sections--22799632531782__announcement-bar .utility-bar--bottom-border {
    background: transparent !important;
}

.scrolled-past-header sticky-header {
    top: 0px !important;
    transition: all .3s ease;
}
.section-header .header-wrapper--border-bottom {
    top: 20px;
    transition: all .3s ease;
}

 

 

CodingFifty_0-1738350195651.png

 

Coding Fifty || Shopify Partner
For any custom section queries, please visit: Fiverr Profile
Found my response useful? Like it and mark as Accepted Solution!
For additional discussions, reach out via: Email ID: codingfifty@gmail.com

View solution in original post

Replies 3 (3)

CodingFifty
Shopify Partner
590 89 110

This is an accepted solution.

Hi @stride,


Go to Online Store, then Theme, and select Edit Code.
Search for base.css/theme.css/style.css/main.css/custom.css file Add the provided code at the end of the file.

 

 

 

div#shopify-section-sections--22799632531782__announcement-bar {
    position: absolute;
    width: 100% !important;
}

#shopify-section-sections--22799632531782__announcement-bar .utility-bar--bottom-border {
    background: transparent !important;
}

.scrolled-past-header sticky-header {
    top: 0px !important;
    transition: all .3s ease;
}
.section-header .header-wrapper--border-bottom {
    top: 20px;
    transition: all .3s ease;
}

 

 

CodingFifty_0-1738350195651.png

 

Coding Fifty || Shopify Partner
For any custom section queries, please visit: Fiverr Profile
Found my response useful? Like it and mark as Accepted Solution!
For additional discussions, reach out via: Email ID: codingfifty@gmail.com
stride
Tourist
13 0 0

Thanks!! It works 🙂

CodingFifty
Shopify Partner
590 89 110

You're welcome! @stride 

Coding Fifty || Shopify Partner
For any custom section queries, please visit: Fiverr Profile
Found my response useful? Like it and mark as Accepted Solution!
For additional discussions, reach out via: Email ID: codingfifty@gmail.com