Announcement bar issue in brooklyn theme

Solved
MihirKanjaira
Excursionist
17 0 9

23.PNG

 

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

Marty
Shopify Staff
Shopify Staff
198 29 41

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!

Marty | Social Care @ Shopify
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- To learn more visit the Shopify Help Center or the Shopify Blog

KetanKumar
Shopify Partner
22296 2267 8341

@MihirKanjaira 

sorry for that issue but i can't see now announcement bar can you please show me?

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
MihirKanjaira
Excursionist
17 0 9

 

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

MihirKanjaira
Excursionist
17 0 9

@KetanKumar 

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.

KetanKumar
Shopify Partner
22296 2267 8341

This is an accepted solution.

@MihirKanjaira 

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;
}
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
MihirKanjaira
Excursionist
17 0 9

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.

24.PNG

Can you help with this ?

 

0 Likes
KetanKumar
Shopify Partner
22296 2267 8341

@MihirKanjaira 

oh sorry please try this code

.site-header {padding: 0;}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
MihirKanjaira
Excursionist
17 0 9

@KetanKumar 

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.

25.PNG

But it looks like this

26.PNG

I hope you understand what I am trying to say here.

0 Likes