How to reduce height of announcement bar in Impulse theme?

Technical Q&A
1

Hi guys,

I added the code in ‘Sections’ for announcement-bar.liquid and it worked great! Only thing is I can’t work out how to reduce the height of the announcement bar at the very top of the page. I have turned it off because it’s too ugly (almost double the height I want it to be because I want it to be identical to the one under the header).

Any ideas how I can edit the code to reduce the height? I’ll copy/paste the code from announcement-bar.liquid below in case that helps. Thanks so much if you can help!

.announcement-bar { background-color: {{ section.settings.announcement_bar_color }}; text-align: center; text-decoration: none; } .announcement-bar__message { font-size: large; padding: 0px; color: {{ section.settings.announcement_bar_text_color }}; }

{%- if section.settings.show_announcement -%}
{%- if section.settings.home_page_only == false or template.name == ‘index’ -%}

{%- if section.settings.link == blank -%}

{%- else -%} {%- endif -%}

{{ section.settings.text | escape }}

{%- if section.settings.link == blank -%}

{%- else -%} {%- endif -%}

{%- endif -%}
{%- endif -%}

{% schema %}
{
“name”: “Announcement bar”,
“settings”: [
{
“type”: “checkbox”,
“id”: “show_announcement”,
“label”: “Show announcement”,
“default”: false
},
{
“type”: “checkbox”,
“id”: “home_page_only”,
“label”: “Home page only”,
“default”: true
},
{
“type”: “color”,
“id”: “announcement_bar_color”,
“label”: “Background color”,
“default”: “#000000”
},
{
“type”: “color”,
“id”: “announcement_bar_text_color”,
“label”: “Text color”,
“default”: “#ffffff”
},
{
“type”: “text”,
“id”: “text”,
“label”: “Announcement text”,
“default”: “Announce something here”
},
{
“type”: “url”,
“id”: “link”,
“label”: “Announcement link”
}
]
}
{% endschema %}

2

Hi @Caneleo1234 ,

Please change code CSS:

.announcement-bar {
background-color: {{ section.settings.announcement_bar_color }};
text-align: center;
text-decoration: none;
}
.announcement-bar__message {
font-size: large;
padding: 0px;
color: {{ section.settings.announcement_bar_text_color }};
}

=>

.announcement-bar {
background-color: {{ section.settings.announcement_bar_color }};
text-align: center;
text-decoration: none;
padding: 5px 0;
}
.announcement-bar__message {
font-size: 15px;
padding: 0px;
color: {{ section.settings.announcement_bar_text_color }};
margin-bottom: 0;
}

Hope it helps!