How can I divide announcement bar, scrolling bar in 3 section with different colour something like below image
Store url - https://784221-79.myshopify.com/
Hi @hem0903
You can achieve this using this CSS
.announcement-bar__wrapper { padding: 0; }
.announcement-bar__wrapper .announcement-bar__content { width: 100%; max-width: 100%; display: flex; align-items: center; justify-content: center; max-width: 100%; padding: 0; }
.announcement-bar__wrapper .announcement-bar__content .visually-hidden { height: auto; position: unset !important; margin: 0; clip: auto;}
.announcement-bar__container { display: block; padding: 0; }
.announcement-bar__wrapper .announcement-bar__content li { width: 33.33%; padding: 10px; }
.announcement-bar__wrapper .announcement-bar__content li:first-child { background: green; }
.announcement-bar__wrapper .announcement-bar__content li:nth-child(2) { background: pink; }
.announcement-bar__wrapper .announcement-bar__content li:nth-child(3) { background: yellow; }
Make sure you replace the color with actual color codes
If This Solution works Mark it as a Solution and Like this Or Buy Me Coffee
Hi @hem0903
I have written custom CSS to make the existing scrolling bar in 3 section with different colour. Please follow below steps to get this done.
Follow these Steps:
- Go to Online Store
- Edit Code
- Find theme.liquid file
- Add the following code just above tag
If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!
Best Regards,
Makka
Hi I want to create new one that don’t scroll don’t want to edit new one.
Like this but there should be 3 text instead of 2.
Hi @hem0903
For that it required some liquid customization for that you can hire an expert who can help you out or you can sent the collaboration code to me I can see that for you