Solved

Announcement bar design

robynandrebel
Tourist
5 0 3

Hoping someone can help me .... I have an announcement bar on my shopify store, which I've managed to edit myself through searching for various bits of code to add to the current theme.
However I don't want my Announcement Bar as a block colour, I would like to add a divider line under it to separate it from the header logo. Is this possible? I use the Minimal Theme.


Thanks, Sam

Accepted Solution (1)
Zworthkey
Shopify Partner
5581 642 1564

This is an accepted solution.

@media screen and (min-width: 769px){
.header-bar {
    text-align: right;
    padding-top: 8px;
    padding-bottom: 8px;
border-bottom:1px solid #FF43D2;

}
}

View solution in original post

Replies 9 (9)

oscprofessional
Shopify Partner
15821 2368 3077

Hello,
you are facing this issue, it would be my pleasure to help you.
Welcome to the Shopify community!
Please Share your store live url & screenshot where you want to do modification, so that I will solve your issue here

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
robynandrebel
Tourist
5 0 3

Thanks for getting back to me ...
my website is https://robynandrebel.co.uk/ and I would like a pink divider line, like the others but I want it under the announce bar as shown where I've drawn the black line.

Thanks, Sam

shopify.png

 

Zworthkey
Shopify Partner
5581 642 1564

@robynandrebel 
Add the code in theme.scss or theme.css

@media screen and (min-width: 769px){
.header-bar {
    text-align: right;
    padding-top: 8px;
    padding-bottom: 8px;
border-bottom:1px solid pink;

}
}

Thank you.

 

robynandrebel
Tourist
5 0 3

@Zworthkeyyou are amazing!!! Thank you ... is there anyway to change the pink to match the pink on my website?? The colour code is #FF43D2

Thanks, Sam

Zworthkey
Shopify Partner
5581 642 1564

This is an accepted solution.

@media screen and (min-width: 769px){
.header-bar {
    text-align: right;
    padding-top: 8px;
    padding-bottom: 8px;
border-bottom:1px solid #FF43D2;

}
}
robynandrebel
Tourist
5 0 3

Thank you soooooooooooooo much. I need to learn to code!!! You're a star!

Zworthkey
Shopify Partner
5581 642 1564

Thanks but I'm not a star.

robynandrebel
Tourist
5 0 3

@Zworthkeyyou're definitely very clever. I didn't have a clue what to do! I'm extremely appreciative!

fernanda-garcia
Tourist
9 0 0

Hi Robynandrebel, I see what you're saying. There's no need to mess around with code. We're developing a Shopify app to solve this issue for you. This can help you incentivize your visitors to buy more by triggering Flash sales and Promo codes especially for them, or customize your communication according to your visitor's origin (Facebook, TikTok, Instagram, Email, or basically any other logic you can think of!)

 

Click here to see all the features we are including https://bit.ly/3dxdEae

 

We'd love to have you try our app for free! Please add your email to the Early Access box or email me at fernanda@shopifica.com for more details, happy to chat more!

 

Thx.