Announcement bar under sticky header (Debut Theme)

[Elisaw]

Hello I am using Debut Theme and want to have my banner appear under the sticky navigation (site-header1) which is below the main header (see screenshots attached). I managed to get the banner to appear where it should by moving its position in the code. In the CSS I wrote position:fixed but it is creating a horizontal overflow which I cannot fix... I am not good with js but I can see that the sticky navigation is fixed on scroll only. I want the banner to behave the same way, always scrolling with the nav. I would greatly appreciate your help!

This is what I have header.liquid

 <div class="site-header1">
    <div data-section-id="{{ section.id }}" data-section-type="site-header header-section site-header__search-toggle site-header__search" >


      <nav class="search site-header2 header-section site-header__search-toggle site-header__search small--hide2 border-bottom" id="AccessibleNav" role="navigation">
        {% include 'site-nav', nav_alignment: 'site-nav--centered' %}
        
        <!-- ANNOUNCEMENT BAR UNDER NAV -->

        {% if section.settings.message %}
        {% if section.settings.home_page_only == false or template.name == 'index' %}
        <style>
            .announcement-bar {
              background-color: {% assign temp_var = section.id | append: "_color_bg" %}{% assign kl = temp_var | size %}{% if kl > 30 %}{% assign temp_var = temp_var | md5 | truncate:30,"" %}{% endif %}{% if shop.metafields[ml_sections_ns][temp_var] %}{% assign temp = shop.metafields[ml_sections_ns][temp_var] %}{% else %}{% assign temp = section.settings.color_bg %}{% endif %}{{ temp }};

            }

            @_media only screen and (max-width: 1075px) {
              .announcement-bar {
              }
            }


            .announcement-bar--link:hover {
              {% capture brightness %}{% assign temp_var = section.id | append: "_color_bg" %}{% assign kl = temp_var | size %}{% if kl > 30 %}{% assign temp_var = temp_var | md5 | truncate:30,"" %}{% endif %}{% if shop.metafields[ml_sections_ns][temp_var] %}{% assign temp = shop.metafields[ml_sections_ns][temp_var] %}{% else %}{% assign temp = section.settings.color_bg %}{% endif %}{{ temp }}{% endcapture %}{% assign brightness = brightness  | color_brightness  %}{% assign brightness_number = brightness | times:1 | append:"" %}{% if brightness_number == brightness %}{% assign brightness = brightness | times:1 %}{% endif %}

              {% if brightness <= 192 %}
                {% assign lightenAmount = 255 | minus: brightness | divided_by: 255 | times: 16 %}
                background-color: {% assign temp_var = section.id | append: "_color_bg" %}{% assign kl = temp_var | size %}{% if kl > 30 %}{% assign temp_var = temp_var | md5 | truncate:30,"" %}{% endif %}{% if shop.metafields[ml_sections_ns][temp_var] %}{% assign temp = shop.metafields[ml_sections_ns][temp_var] %}{% else %}{% assign temp = section.settings.color_bg %}{% endif %}{{ temp | color_lighten: lightenAmount }};
              {% else %}
                {% assign darkenAmount = 255 | divided_by: brightness | times: 8 %}
                background-color: {% assign temp_var = section.id | append: "_color_bg" %}{% assign kl = temp_var | size %}{% if kl > 30 %}{% assign temp_var = temp_var | md5 | truncate:30,"" %}{% endif %}{% if shop.metafields[ml_sections_ns][temp_var] %}{% assign temp = shop.metafields[ml_sections_ns][temp_var] %}{% else %}{% assign temp = section.settings.color_bg %}{% endif %}{{ temp | color_darken: darkenAmount }};
              {% endif %}
            }

            .announcement-bar__message {
              color: {% assign temp_var = section.id | append: "_color_text" %}{% assign kl = temp_var | size %}{% if kl > 30 %}{% assign temp_var = temp_var | md5 | truncate:30,"" %}{% endif %}{% if shop.metafields[ml_sections_ns][temp_var] %}{% assign temp = shop.metafields[ml_sections_ns][temp_var] %}{% else %}{% assign temp = section.settings.color_text %}{% endif %}{{ temp }};
            }
          </style>
        <div class="announcement-bar">
          {% if section.settings.message_link == blank %}
            
          {% else %}
            <a href="{% assign temp_var = section.id | append: "_message_link" %}{% assign kl = temp_var | size %}{% if kl > 30 %}{% assign temp_var = temp_var | md5 | truncate:30,"" %}{% endif %}{% if shop.metafields[ml_sections_ns][temp_var] %}{% assign temp = shop.metafields[ml_sections_ns][temp_var] %}{% else %}{% assign temp = section.settings.message_link %}{% endif %}{{ temp }}" class="announcement-bar announcement-bar--link">
              {% endif %}

                <p class="announcement-bar__message">{% assign temp_var = section.id | append: "_message_text" %}{% assign kl = temp_var | size %}{% if kl > 30 %}{% assign temp_var = temp_var | md5 | truncate:30,"" %}{% endif %}{% if shop.metafields[ml_sections_ns][temp_var] %}{% assign temp = shop.metafields[ml_sections_ns][temp_var] %}{% else %}{% assign temp = section.settings.message_text %}{% endif %}{{ temp | escape }}</p>

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

              {% else %}
            </a>
          {% endif %}

        {% endif %}
      {% endif %}
      </div>

      	<!-- ANNOUNCEMENT BAR END -->
      </nav>


    </div>
  </div>

This is what I have in the theme.scss.liquid file

.announcement-bar {
  text-align: center;
  position: fixed;
  top: 60px;
  width: 100%;
  z-index: 1;
}

 

[diego_ezfy]

@Elisaw 

Hi there,

Have you checked this solution yet? It does exactly what you're looking for plus much more. It was coded specifically for the Debut theme.

Let me know if you have any questions, I'll be happy to help. 

Thanks!

Kind regards,
Diego

[Elisaw]

@diego_ezfythank you for the suggestion! I don't need such a fancy solution though I mainly want to be able to code it myself