Reduce size of the promotion / announcement bar Venture theme & change its colour

Solved
ChamanGarg
Excursionist
32 0 7

Hi, I want to reduce the size of the promotion bar in the venture theme as well as change the colour of the background of the same without editing the button colour (currently both the button and promotion bar are supposed to have the same colour)

 

Can someone please help me?

 

Store- sohum-linen.myshopify.com

Pass- chaman10

0 Likes
suyash1
Shopify Partner
1924 192 289

@ChamanGarg - what background color do you want for that bar?

you are welcome to contact me.
My email - suyash.patankar@gmail.com

#1 page builder app on Shopify - for FREE! PageFly
0 Likes
ChamanGarg
Excursionist
32 0 7

The colour code is: 0B383E

dmwwebartisan
Shopify Partner
4354 977 1243

This is an accepted solution.

@ChamanGarg 

Please add the following code at the bottom of your assets/theme.scss.liquid file.

 

.notification--success, .notification--promo {
    background-color: #0B383E !important;
    color: white;
}

 

Hope this works.

Thanks! 

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
ChamanGarg
Excursionist
32 0 7

@dmwwebartisan thanks a lot. It worked.

 

Also, can you please tell me as to how I can reduce the width of the promotion bar?

dmwwebartisan
Shopify Partner
4354 977 1243

This is an accepted solution.

@ChamanGarg 

Reduce the width of the promotion bar

Please add the following code at the bottom of your assets/theme.css file.

.notification--active { width: 75%; margin: 0 auto;}

Hope this works.

Thanks! 

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
dmwwebartisan
Shopify Partner
4354 977 1243

This is an accepted solution.

@ChamanGarg 

Please add the following code to decrease height.

.notification__link {
display: block;
padding: 5px 0 !important;
}

 

Thanks!

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
dmwwebartisan
Shopify Partner
4354 977 1243

This is an accepted solution.

@ChamanGarg 

Please add the following code to change the font of the announcement bar.

.notification__message{
font-family: sans-serif !important;
}

 

Hope this works.

Thanks! 

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App