How to split the announcement bar into multiple sections - Debut theme

[Luvita]

Hi There

We would be grateful if someone could please help us with splitting our announcement bar into 3 sections, so that we can add a delivery info link, referral link, and another link.

We're using the Debut theme.

Thanks!

Best

Luke

[Luvita]

Bump! we'd be grateful for some help on this. Thanks!

[Luvita]

Bump! we'd be grateful for some help on this. Thanks!

[lenarei]

If you are still looking for a solution to this:

I managed to do something of the kind on my Showcase theme by adding flex-containers to the header. Depending on your theme's setup, you will need to find header.liquid or announcement.liquid and add something of that kind:

  <div class="flex-container" style="background-color: {{ settings.col_head_announcement_bar_bg }}">    
  <div class="flex-quarter cc-announcement desktop-only">
    {% if section.settings.announcement_link != blank %}<a data-cc-animate-click href="{{ section.settings.announcement_link }}">{% endif %}
    <div class="cc-announcement__inner">
      {{ section.settings.announcement_text_left }}
    </div>
    {% if section.settings.announcement_link != blank %}</a>{% endif %}
  </div>
  <div class="flex-half cc-announcement ">
    {% if section.settings.announcement_link != blank %}<a data-cc-animate-click href="{{ section.settings.announcement_link }}">{% endif %}
    <div class="cc-announcement__inner">
      {{ section.settings.announcement_text_center }}
    </div>
    {% if section.settings.announcement_link != blank %}</a>{% endif %}
  </div>
  <div class="flex-quarter cc-announcement desktop-only">
    {% if section.settings.announcement_link != blank %}<a data-cc-animate-click href="{{ section.settings.announcement_link }}">{% endif %}
    <div class="cc-announcement__inner">
      {{ section.settings.announcement_text_right }}
    </div>
    {% if section.settings.announcement_link != blank %}</a>{% endif %}
  </div>    
  </div>

And add some custom CSS to your styles.css.liquid:

.flex-container{
  display: flex;
  flex: 0 0 100%;
  }
.flex-columns{
  padding: 0px;
  }
.flex-half{
 flex: 50%;
 margin: auto; 
}
.flex-quarter{
  flex: 25%;
  margin: auto; 
}
.desktop-only {
  display: block;
}
@media (max-width: 767px) {
  .desktop-only {
    display: none !important;
  }
}

[Gil-Momo]

We were looking for something similar. Did this work?

Similar do the pic attached is what we are looking for: