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:

    
  

    {% if section.settings.announcement_link != blank %}{% endif %}
    

      {{ section.settings.announcement_text_left }}
    

    {% if section.settings.announcement_link != blank %}{% endif %}
  

  
    {% if section.settings.announcement_link != blank %}{% endif %}
    

      {{ section.settings.announcement_text_center }}
    

    {% if section.settings.announcement_link != blank %}{% endif %}
  

  
    {% if section.settings.announcement_link != blank %}{% endif %}
    

      {{ section.settings.announcement_text_right }}
    

    {% if section.settings.announcement_link != blank %}{% endif %}
  
    
  

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: