Solved

Announcement bar issue in brooklyn theme

MihirKanjaira
Excursionist
19 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

Accepted Solution (1)
KetanKumar
Shopify Partner
36839 3635 11972

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

View solution in original post

Replies 8 (8)

Marty
Shopify Staff (Retired)
512 74 103

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.

MihirKanjaira
Excursionist
19 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.

KetanKumar
Shopify Partner
36839 3635 11972

@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
19 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
36839 3635 11972

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
19 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 ?

 

KetanKumar
Shopify Partner
36839 3635 11972

@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
MihirKanjaira
Excursionist
19 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.