Announcement Bar Not Sticking to Top of Site Outside of the Homepage

Store Design
1

Hello everyone. I have an announcement bar at the top of my site that should stay at the top when you scroll. Right now it is acting like any other element on the screen and disappears when I scroll down. However, it works fine on the home page. I am using the Brooklyn theme.

I checked the theme editor and theme code and can’t seem to find the problem.

The announcement bar has Show Announcement checked and Home Page only unchecked in the theme customizer. If it works on one page why not on the others?

Any help would be appreciated, thanks!

2

If you can post a link to your store we can better help. My guess is there’s either some styles specifically applied on your homepage that dont exist in the stylesheet for the whole site or a script running only on your homepage.

3

Yes, here you go: https://flowformulas.com/

1 Like
4

So your “header-wrapper” div is actually what is positioned as “fixed” on your website. For some reason the announcement bar is inside of the “header-wrapper” div on the homepage, but not on the other pages. I would have to actually look at your code to see what’s going on. Would you mind if I requested access to your themes to take a look?

5

@DevBijan

Please add the following code at the bottom of your assets/timber.scss.liquid file.

@media screen and (min-width: 769px){
.main-content { padding-top: 10rem !important;}
.header-wrapper {top: 40px;}
.announcement-bar {
    position: fixed !important;
    z-index: 100 !important;
    width: 100% !important;
}
}

Thanks!

6

Unfortunately this is a client of mine so I can’t give access to anyone.

However here is my header.liquid file


  

    {% include 'drawer-menu' %}
  

  
    

      {% if section.settings.show_announcement %}
        {% if section.settings.home_page_only == false or template.name == 'index' %}
          

          {% if section.settings.link == blank %}
            
          {% else %}
            
          {% endif %}

            

{{ section.settings.text | escape }}

          {% if section.settings.link == blank %}
            

          {% else %}
            
          {% endif %}

        {% endif %}
      {% endif %}

You can see that the announcement bar is in header-wrapper. There is another wrapper after that, when edited in the inspector, moving the bar into that wrapper works. But when I actually move the code the problem stays.

7

@DevBijan

Please add the following code at the bottom of your assets/timber.scss.liquid file.

@media screen and (min-width: 769px){
.main-content { padding-top: 10rem !important;}
.header-wrapper {top: 40px;}
.announcement-bar {
    position: fixed !important;
    z-index: 100 !important;
    width: 100% !important;
}
}
1 Like
8

@dmwwebartisan This almost works! Thank you. The bar sticks now but is still different from the home page vs other pages. Now it seems to be more of a spacing issue.

DevBijan_0-1634047024382.png

DevBijan_1-1634047038836.png
DevBijan_1-1634047038836.png1120×146 7.42 KB

I can fix the issue on all the pages except for the home page now. They are acting as if they take in different css depending on the page?

9

@DevBijan

Please add provided css code i will check and send correct solution for you.

Thanks!

10

Changes are live if you want to take a look now.

11

Hey @DevBijan .

Thanks for reaching out.

I appreciate the context that you have shared as that is super helpful. I wanted to step in this conversation to provide another method of support. Since the Brooklyn theme is designed and supported by Shopify, we can use free design time for Shopify themes to allow our internal themes team make the coding changes on your behalf. If you are interested in using the design time, you will need to login to your store using our Contact Us page. This will allow us to securely verify you as the store owner before discussing the announcement bar with a Shopify Advisor.

Let me know if you have any questions.