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

[ChamanGarg]

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

[suyash1]

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

[ChamanGarg]

The colour code is: 0B383E

[dmwwebartisan · 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! 

[ChamanGarg]

@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 · 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! 

[dmwwebartisan · Accepted solution]

@ChamanGarg 

Please add the following code to decrease height.

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

Thanks!

[dmwwebartisan · 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!