Shopify themes, liquid, logos, and UX
I have added svg logo for my website but because of that when I enable the announcement bar or disable transparent header I facing the mentioned issue in the image.
Can someone please help me out with this?
My store URL is: www.yourhappystop.com
Solved! Go to the solution
This is an accepted solution.
thanks for enable can you please try this code
1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
@media screen and (min-width: 769px) {
.announcement-bar + header .grid__item.large--one-third.medium-down--one-half {
top: inherit;
}
}
Hi @MihirKanjaira.
Thank you for your message and for sharing your store URL.
Firstly, I really enjoyed looking through your shop, it looks great and you have a really interesting product! In regards to your announcement bar issue, are you referring to the banner itself overlapping with your store title?
If so, can you start by clarifying how you added your announcement bar? did you do it directly within your theme settings, did you manipulate your coding at all or are you using a third-party announcement bar application?
If you are using a Shopify theme, we’d be happy to continue assisting you through live chat, email, or callback. Please visit our Help Center here and log in to your account to create a support request. Once you reach a live support member and explain your issue they will be able to have our Themes team take a closer look.
If you have manipulated your store's coding to achieve this, you will need to reach out to a local developer or hire a Shopify Expert to take a look into your work.
If you are using a third-party application, I would recommend reaching out to the app's developer directly as they would be responsible for any customization or editing of how their application's coding is affecting your shop, regardless of what theme you are using. You would be able to find your app's developer support information in your Shopify admin under "Apps" and next to the specific application icon that you are using.
As one last quick aside, I noticed in your footer area that none of your social media links are working and they all link directly back to your storefront, you may want to investigate this further:
You should be able to ensure all the correct links are attached in your "Theme settings" area under, Online store>Themes>Customize>Theme settings>Social media:
I hope this information helps you get the support you need, feel free to reach back out here with any questions you may have, we are always happy to chat!
To learn more visit the Shopify Help Center or the Community Blog.
@Marty Thank you so much for your compliment.
I have used a Brooklyn theme of Shopify. The logo with a title which you see at the top I have added through the code since Shopify doesn't support SVG images. Yes, when I enable the announcement bar from theme customization of Shopify I see the overlapping of the logo/image carousel with the announcement bar at the top.
I am aware of the links on social media. And I intentionally put the store links because I still am working on that part.
Again Big Thank you for your time.
Mihir.
sorry for that issue but i can't see now announcement bar can you please show me?
I have disabled it because my website is live. But now I have enabled it so that you can look into it.
Thank you
Mihir.
This is an accepted solution.
thanks for enable can you please try this code
1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
@media screen and (min-width: 769px) {
.announcement-bar + header .grid__item.large--one-third.medium-down--one-half {
top: inherit;
}
}
Thank you so so much @KetanKumar you are really amazing. Your solution is effective. My announcement bar issue is resolved.
Just a little thing I have observed while disabling the transparent header I got this same issue.
Can you help with this ?
oh sorry please try this code
.site-header {padding: 0;}
Thank you for the quick response.
When I applied this below code header disappeared which is shown in the example nomads image.
.site-header {padding: 0;}
The below code is working perfectly fine for the announcement bar with a transparent header.
@media screen and (min-width: 769px) {
.announcement-bar + header .grid__item.large--one-third.medium-down--one-half {
top: inherit;
}
}
But when the disable the transparent feature then it ideally looks something like this.
But it looks like this
I hope you understand what I am trying to say here.
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024