Announcement bar under sticky header (Debut Theme)

Elisaw
Excursionist
40 1 4

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

 

Screen Shot 2021-01-29 at 8.27.14 PM.pngScreen Shot 2021-01-29 at 8.27.35 PM.png 

0 Likes

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

diego_ezfy_0-1611972384242.png

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

Thanks!

Kind regards,
Diego

 

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Using a free theme? Improve it with copy/paste code snippets clicking here.
◦ Looking to hire an experienced developer? Same day response: ezfycode@gmail.com.
0 Likes
Elisaw
Excursionist
40 1 4

@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

0 Likes