How do I add a bar above the announcement bar in Theme dawn 2023

[AdolfoCV]

How do I add a bar above the announcement bar? What I need is to include brand logos that will redirect me to another web page. And that in mobile mode these images adapt.

my page : thn.pe
reference page: https://www.triathlon.com.pe/

[NomtechSolution]

.brand-bar {
  background-color: #f0f0f0;
  height: 60px;
  padding: 10px;
  display: flex;
  align-items: center;
}

.brand-bar a {
  margin-right: 10px;
}

.brand-bar img {
  height: 40px;
  width: auto;
}

[AdolfoCV]

Hi, I need to add a new bar, above the announcement bar. I don't want to modify the announcement bar.
The more accurate description would be to create a new bar above the announcement bar.

[jimrockcity]

Go to the Announcement Bar and click the plus sign that says "Add Announcement."
Then you can drag to re-order if needed.

[AdolfoCV]

Can you please help me, I need a bar the same size as the announcement bar, which allows me to put 3 static texts or an image with movement (slider) and a title Also visit us at:

[AdolfoCV · Accepted solution]

1.  Create new liquid---> edith code ----> seccion --- New liquid name: websensepro-announcement-bar.liquid
2. pase {%- section 'websensepro-announcement-bar' -%} Above {% section 'announcement-bar' %}

COPY CODE:

{%- if section.blocks.size > 0 and section.settings.show_announcement_bar -%}
<div class="websensepro-announcement-bar">
<div class="column-left">
<div class="visitenos-label">Descubre más:</div>
</div>
<div class="column-right">
<div class="swiper-container">
<div class="swiper-wrapper">
{%- for block in section.blocks -%}
<div class="swiper-slide">
{%- if block.settings.image_link != blank -%}
<a href="{{ block.settings.image_link }}" class="message-link" target="_blank">
{%- endif -%}
<img src="{{ block.settings.image_url }}" alt="{{ block.settings.alt_text }}" class="message-image">
{%- if block.settings.image_link != blank -%}
</a>
{%- endif -%}
</div>
{%- endfor -%}
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>
</div>
<!-- code by websensepro.com -->
<script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js" defer></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css"/>
<script>
document.addEventListener('DOMContentLoaded', function() {
const swiper = new Swiper('.swiper-container', {
{%- if section.settings.autoplay %}
autoplay: {
delay: {{ section.settings.delay }}
},
{%- endif -%}
loop: true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
});
</script>
<style>
.websensepro-announcement-bar {
background: {{ section.settings.colorBackground }};
overflow: hidden;
}
.column-left {
align-items: center;
justify-content: flex-start;
padding-left: 10px;
}
.column-right {
align-items: center;
justify-content: flex-start;
}
.visitenos-label {
color: {{ section.settings.colorText }};
font-size: 12px;
font-weight: bold;
height:10px;
}
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-slide {
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-family: fantasy;
}
.swiper-button-prev,
.swiper-button-next {
color: {{ section.settings.colorText }};
font-size: 15px;
}
.message-image {
max-width: 100px;
max-height: 30pk;
}
.message-link {
color: {{ section.settings.colorText }};
text-decoration: none;
}
</style>
{%- endif -%}

{% schema %}
{
"name": "Announcement Bar",
"settings": [
{
"type": "checkbox",
"id": "show_announcement_bar",
"label": "Show"
},
{
"type": "checkbox",
"id": "autoplay",
"label": "Autoplay"
},
{
"type": "text",
"id": "delay",
"label": "Delay between transitions (in ms)",
"default": "5000"
},
{
"type": "color",
"id": "colorBackground",
"label": "Background color",
"default": "#ffffff"
},
{
"type": "color",
"id": "colorText",
"label": "Text color",
"default": "#000"
}
],
"blocks": [
{
"type": "header",
"name": "Message",
"settings": [
{
"id": "image_url",
"type": "url",
"label": "Image URL"
},
{
"id": "image_link",
"type": "url",
"label": "Image Link"
}
]
}
]
}
{% endschema %}