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

[DevBijan]

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!

[Ninthony]

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.

[DevBijan]

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

[Ninthony]

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?

[DevBijan]

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

However here is my header.liquid file 

<style>
  .site-header__logo img {
    max-width: {{ section.settings.logo_max_width | escape | default: '180' | remove: 'px' | append: 'px' }};
  }

  @media screen and (max-width: 768px) {
    .site-header__logo img {
      max-width: 100%;
    }
  }
</style>

<div data-section-id="{{ section.id }}" data-section-type="header-section" data-template="{{ template.name }}">
  <div id="NavDrawer" class="drawer drawer--left">
    {% include 'drawer-menu' %}
  </div>
  <div class="header-container drawer__header-container">
    <div class="header-wrapper hero__header">
      {% if section.settings.show_announcement %}
        {% if section.settings.home_page_only == false or template.name == 'index' %}
          <style>
            .announcement-bar {
              background-color: {{ section.settings.color_bg }};
            }

            .announcement-bar--link:hover {
              {% assign brightness = section.settings.color_bg | color_brightness %}

              {% if brightness <= 192 %}
                {% assign lightenAmount = 255 | minus: brightness | divided_by: 255 | times: 16 %}
                background-color: {{ section.settings.color_bg | color_lighten: lightenAmount }};
              {% else %}
                {% assign darkenAmount = 255 | divided_by: brightness | times: 8 %}
                background-color: {{ section.settings.color_bg | color_darken: darkenAmount }};
              {% endif %}
            }

            .announcement-bar__message {
              color: {{ section.settings.color_text }};
            }
          </style>

          {% if section.settings.link == blank %}
            <div class="announcement-bar">
          {% else %}
            <a href="{{ section.settings.link }}" class="announcement-bar announcement-bar--link">
          {% endif %}

            <p class="announcement-bar__message">{{ section.settings.text | escape }}</p>

          {% if section.settings.link == blank %}
            </div>
          {% else %}
            </a>
          {% endif %}

        {% endif %}
      {% endif %}

      <header class="site-header{% if template.name == 'index' %} hero--color-0{% endif %}" role="banner">
        <div class="wrapper">
          <div class="grid--full grid--table">
            <div class="grid__item large--hide large--one-sixth one-quarter">
              <div class="site-nav--open site-nav--mobile">
                <button type="button" class="icon-fallback-text site-nav__link site-nav__link--burger js-drawer-open-button-left" aria-controls="NavDrawer">
                  <span class="burger-icon burger-icon--top"></span>
                  <span class="burger-icon burger-icon--mid"></span>
                  <span class="burger-icon burger-icon--bottom"></span>
                  <span class="fallback-text">{{ 'general.drawers.navigation' | t }}</span>
                </button>
              </div>
            </div>
            <div class="grid__item large--one-third medium-down--one-half">
              {% comment %}
                Use the uploaded logo from theme settings if enabled.
                Site name gets precedence with H1 tag on homepage, div on other pages.
              {% endcomment %}
              {% if template.name == 'index' %}
                <h1 class="site-header__logo large--left" itemscope itemtype="http://schema.org/Organization">
              {% else %}
                <div class="h1 site-header__logo large--left" itemscope itemtype="http://schema.org/Organization">
              {% endif %}
                {% if section.settings.logo_max_width != blank %}
                  {% capture image_size %}{{ section.settings.logo_max_width | escape }}x{% endcapture %}
                {% else %}
                  {% assign image_size = "180x" %}
                {% endif %}

                {% if section.settings.logo-inverted and template.name == 'index' %}
                  <a href="/" itemprop="url" class="site-header__logo-link">
                    <img src="{{ section.settings.logo-inverted | img_url: image_size }}"
                    srcset="{{ section.settings.logo-inverted | img_url: image_size }} 1x, {{ section.settings.logo-inverted | img_url: image_size, scale: 2 }} 2x"
                    alt="{{ section.settings.logo-inverted.alt | default: shop.name }}"
                    itemprop="logo">
                  </a>
                {% elsif section.settings.logo %}
                  <a href="/" itemprop="url" class="site-header__logo-link">
                     <img src="{{ section.settings.logo | img_url: image_size }}"
                     srcset="{{ section.settings.logo | img_url: image_size }} 1x, {{ section.settings.logo | img_url: image_size, scale: 2 }} 2x"
                     alt="{{ section.settings.logo.alt | default: shop.name }}"
                     itemprop="logo">
                  </a>
                {% else %}
                  <a href="/" itemprop="url">{{ shop.name }}</a>
                {% endif %}
              {% if template.name == 'index' %}
                </h1>
              {% else %}
                </div>
              {% endif %}
            </div>
            <nav class="grid__item large--two-thirds large--text-right medium-down--hide" role="navigation">
              {% comment %}
                List out your main-menu linklist (default)

                More info on linklists:
                  - http://docs.shopify.com/themes/liquid-variables/linklists
              {% endcomment %}
              <!-- begin site-nav -->
              <ul class="site-nav" id="AccessibleNav">
                {% for link in linklists[section.settings.main_menu_link_list].links %}
                  {% if link.links != blank %}
                  {% assign parent_index = forloop.index %}
                    <li
                      class="site-nav__item site-nav--has-dropdown {% if link.active %}site-nav--active{% endif %}"
                      aria-haspopup="true"
                      data-meganav-type="parent">
                      <a
                        href="{{ link.url }}"
                        class="site-nav__link"
                        data-meganav-type="parent"
                        aria-controls="MenuParent-{{ parent_index }}"
                        aria-expanded="false"
                        {% unless template.name == 'index' %}{% if link.active %}aria-current="page"{% endif %}{% endunless%}>
                          {{ link.title | escape }}
                          <span class="icon icon-arrow-down" aria-hidden="true"></span>
                      </a>
                      <ul
                        id="MenuParent-{{ parent_index }}"
                        class="site-nav__dropdown {% if link.levels == 2 %}site-nav--has-grandchildren{% endif %}"
                        data-meganav-dropdown>
                        {% for childlink in link.links %}
                          {% if childlink.links != blank %}
                          {% assign child_index = forloop.index %}
                            <li
                              class="site-nav__item site-nav--has-dropdown site-nav--has-dropdown-grandchild {% if childlink.active %}site-nav--active{% endif %}"
                              aria-haspopup="true">
                              <a
                                href="{{ childlink.url }}"
                                class="site-nav__dropdown-link"
                                aria-controls="MenuChildren-{{ parent_index }}-{{ child_index }}"
                                data-meganav-type="parent"
                                {% unless template.name == 'index' %}{% if childlink.active %}aria-current="page"{% endif %}{% endunless%}
                                tabindex="-1">
                                  {{ childlink.title | escape }}
                                  <span class="icon icon-arrow-down" aria-hidden="true"></span>
                              </a>
                              <div class="site-nav__dropdown-grandchild">
                                <ul
                                  id="MenuChildren-{{ parent_index }}-{{ child_index }}"
                                  data-meganav-dropdown>
                                  {% for grandchildlink in childlink.links %}
                                    <li{% if grandchildlink.active %} class="site-nav--active"{% endif %}>
                                      <a
                                        href="{{ grandchildlink.url }}"
                                        class="site-nav__dropdown-link"
                                        data-meganav-type="child"
                                        {% unless template.name == 'index' %}{% if grandchildlink.active %}aria-current="page"{% endif %}{% endunless %}
                                        tabindex="-1">
                                          {{ grandchildlink.title | escape }}
                                        </a>
                                    </li>
                                  {% endfor %}
                                </ul>
                              </div>
                            </li>
                          {% else %}
                            <li{% if childlink.active %} class="site-nav--active"{% endif %}>
                              <a
                                href="{{ childlink.url }}"
                                class="site-nav__dropdown-link"
                                data-meganav-type="child"
                                {% if childlink.active %}aria-current="page"{% endif %}
                                tabindex="-1">
                                  {{ childlink.title | escape }}
                              </a>
                            </li>
                          {% endif %}
                        {% endfor %}
                      </ul>
                    </li>
                  {% else %}
                    <li class="site-nav__item{% if link.active %} site-nav--active{% endif %}">
                      <a
                        href="{{ link.url }}"
                        class="site-nav__link"
                        data-meganav-type="child"
                        {% unless template.name == 'index' %}{% if link.active %}aria-current="page"{% endif %}{% endunless%}>
                          {{ link.title | escape }}
                      </a>
                    </li>
                  {% endif %}
                {% endfor %}

                {% comment %}
                  Remove comment tags below to add a search box to your header, visible on screens where your header menu
                  is displayed inline.
                  <li class="site-nav__item site-nav--search__bar medium-down--hide">
                    {% include 'search-bar', search_btn_style: 'btn', search_bar_location: 'search-bar--header' %}
                  </li>
                {% endcomment %}
                {% if shop.customer_accounts_enabled %}
                  <li class="site-nav__item site-nav__expanded-item site-nav__item--compressed">
                    <a class="site-nav__link site-nav__link--icon" href="/account">
                      <span class="icon-fallback-text">
                        <span class="icon icon-customer" aria-hidden="true"></span>
                        <span class="fallback-text">
                          {% if customer %}
                            {{ 'layout.customer.account' | t }}
                          {% else %}
                            {{ 'layout.customer.log_in' | t }}
                          {% endif %}
                        </span>
                      </span>
                    </a>
                  </li>
                {% endif %}

                {% if section.settings.search == 'page' or section.settings.search == 'modal' %}
                  {% assign search_modal = true %}
                  {% if section.settings.search == 'page' %}
                    {% assign search_modal = false %}
                  {% endif %}
                  <li class="site-nav__item site-nav__item--compressed">
                    <a href="/search" class="site-nav__link site-nav__link--icon{% if search_modal %} js-toggle-search-modal{% endif %}" data-mfp-src="#SearchModal">
                      <span class="icon-fallback-text">
                        <span class="icon icon-search" aria-hidden="true"></span>
                        <span class="fallback-text">{{ 'general.search.title' | t }}</span>
                      </span>
                    </a>
                  </li>
                {% endif %}

                <li class="site-nav__item site-nav__item--compressed">
                  <a href="/cart" class="site-nav__link site-nav__link--icon cart-link js-drawer-open-button-right" aria-controls="CartDrawer">
                    <span class="icon-fallback-text">
                      <span class="icon icon-cart" aria-hidden="true"></span>
                      <span class="fallback-text">{{ 'layout.cart.title' | t }}</span>
                    </span>
                    <span class="cart-link__bubble{% if cart.item_count > 0 %} cart-link__bubble--visible{% endif %}"></span>
                  </a>
                </li>

              </ul>
              <!-- //site-nav -->
            </nav>
            <div class="grid__item large--hide one-quarter">
              <div class="site-nav--mobile text-right">
                <a href="/cart" class="site-nav__link cart-link js-drawer-open-button-right" aria-controls="CartDrawer">
                  <span class="icon-fallback-text">
                    <span class="icon icon-cart" aria-hidden="true"></span>
                    <span class="fallback-text">{{ 'layout.cart.title' | t }}</span>
                  </span>
                  <span class="cart-link__bubble{% if cart.item_count > 0 %} cart-link__bubble--visible{% endif %}"></span>
                </a>
              </div>
            </div>
          </div>

        </div>
      </header>
    </div>
  </div>
</div>

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. 

[dmwwebartisan]

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

[DevBijan]

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

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?

[dmwwebartisan]

@DevBijan 

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

Thanks!

[DevBijan]

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

[Ollie]

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.

[dmwwebartisan]

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