Announcement bar design

Solved
robynandrebel
Tourist
5 0 2

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

0 Likes

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

If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
0 Likes
robynandrebel
Tourist
5 0 2

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

 

0 Likes

@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.

 

If helpful, please Like and Accept Solution. if you Want to modify or Customize your theme, Hire us. or Want to know more. Read our Shopify Blogs.
Email us: sales@zworthkey.com Contact us: https://www.zworthkey.com/shopify-services/
0 Likes
robynandrebel
Tourist
5 0 2

@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

0 Likes

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;

}
}
If helpful, please Like and Accept Solution. if you Want to modify or Customize your theme, Hire us. or Want to know more. Read our Shopify Blogs.
Email us: sales@zworthkey.com Contact us: https://www.zworthkey.com/shopify-services/
0 Likes
robynandrebel
Tourist
5 0 2

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

Thanks but I'm not a star.

If helpful, please Like and Accept Solution. if you Want to modify or Customize your theme, Hire us. or Want to know more. Read our Shopify Blogs.
Email us: sales@zworthkey.com Contact us: https://www.zworthkey.com/shopify-services/
0 Likes
robynandrebel
Tourist
5 0 2

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