announcement bar single line text

Solved
Highlighted
Excursionist
19 1 4

Hi I can't seem to get my announcement bar to be single line text im new to this so please be patient thank you im using minimal theme and my site is sweetstylesboutique.com

0 Likes
Highlighted
Shopify Partner
2224 483 626

This is an accepted solution.

Hey @sweetstylesbtq 

Please add following code in your assets/theme.scss.liquid file.

@media screen and (min-width: 769px){
.header-bar__left {width: 65.33%;}
}

Hope this works for you.


Thanks!

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
0 Likes
Highlighted
Excursionist
19 1 4

seriously your awesome thank you again for your help !!!

1 Like
Highlighted
Astronaut
1085 177 213

Hello,

I have developed some code for you that is the best I can do from my position; the text is too long, so I made it use ellipsis instead of breaking down to the next line.

Ideally you'd need to hire a developer and make the text slide so people could read the full message. There are also better UI adjustments that can be done (like making the search box a button instead of a textbox) to give a better UI and improve UX.

1. In your Shopify Admin go to online store > themes > actions > edit code
admin-page.png
2. In your theme.liquid file, find the </body> (press CTRL + F or command + F on Mac)
3. paste this code right above the </body> tag:

<style>
.post-large--display-table {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
}

.post-large--display-table > *:nth-child(1){
    max-width: 60% !important;
    width: 100%;
}

.post-large--display-table > *:nth-child(2){
    display: flex;
    align-items: center;
    justify-content: flex-end;
    max-width: 40% !important;
    min-width: 441px;
    width: 100%;
}

@media (max-width:1040px){
    .post-large--display-table > *:nth-child(1){
    max-width: 50% !important;
    width: 100%;
}
}

@media (max-width:928px){
    .post-large--display-table > *:nth-child(1){
    max-width: 45% !important;
    width: 100%;
}
}

@media (max-width:839px){
    .post-large--display-table > *:nth-child(1){
    max-width: 40% !important;
    width: 100%;
}
}
</style>


Let me know whether it's better for you.

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Hire me! Recommended by 25+ customers on Facebook. Click here to read their reviews.
◦ Contact me at: diego.boarutto.fortes@gmail.com
0 Likes