How can I decrease the height of the announcement bar?

[sarahche]

Can anyone help with reducing the height of the announcement bar? My code for the announcement-bar.liquid section currently is:

{%- liquid

assign hd_locale_selector = false
assign hd_country_selector = false
assign show_cart_links = false
assign announcement_cart = false

if section.settings.show_country_selector and localization.available_countries.size > 1
assign hd_country_selector = true
endif

if section.settings.show_locale_selector and shop.published_locales.size > 1
assign hd_locale_selector = true
endif

if section.settings.announcement_cart
assign announcement_cart = true
assign show_cart_links = true
endif

-%}

{% if section.settings.top_nav != blank %}

{% for link in linklists[section.settings.top_nav].links %}
• {{ link.title }}
{% endfor %}

{% endif %}

{% if section.settings.announcement_text != blank %}

{{ section.settings.announcement_text }}

{% endif %}

{% render 'shopping-cart-links', cart: cart, show_cart_links: show_cart_links, hd_locale_selector: hd_locale_selector, hd_country_selector: hd_country_selector, fill_color: 'var(--announcement-bar-text-color)', wrapper: '.announcement__cart' %}

{% style %}

.announcement__bar-section {
–topbar-font-size: {{ section.settings.announcement_text_size }}px;
–topbar-text-color: {{ settings.announcement_bar_text_color }};
–topbar-text-color-light: {{ settings.announcement_bar_text_color | color_lighten: 30 }};
–topbar-background-color: {{ settings.announcement_bar_background }};
–topbar-font-family: var(–main-family);
}

.announcement__bar-section {
font-size: {{ section.settings.announcement_text_size }}px;
font-size: var( --topbar-font-size, {{ section.settings.announcement_text_size }}px);
text-align: center !important;
}
.announcement__bar-section,
.announcement__bar-section a {
color: {{ settings.announcement_bar_text_color }};
color: var( --topbar-text-color, {{ settings.announcement_bar_text_color }});
}

.announcement__bar-section .slideout__trigger–open button.button-as-link,
.announcement__bar-section ul.shopping__cart-links li a:hover,
.announcement__bar-section ul.announcement__bar-nav li a:hover,
.announcement__bar-section ul.shopping__cart-links li a:focus,
.announcement__bar-section ul.announcement__bar-nav li a:focus,
.announcement__bar-section .slideout__trigger-mobile-menu:hover,
.announcement__bar-section .slideout__trigger-mobile-menu:focus {
color: {{ settings.announcement_bar_text_color | color_lighten: 30 }};
color: var( --topbar-text-color-light, {{ settings.announcement_bar_text_color | color_lighten: 30 }});
}
.announcement__bar-section ul.shopping__cart-links li a {
font-size: {{ section.settings.announcement_text_size }}px;
font-size: var( --topbar-font-size, {{ section.settings.announcement_text_size }}px);
}
.announcement__bar-section .disclosure__toggle,
.announcement__bar-section .slideout__trigger–open button.button-as-link {
font-size: var( --topbar-font-size, {{ section.settings.announcement_text_size }}px) !important;
font-family: var(–main-family, {{ settings.main_font.family }}, {{ settings.main_font.fallback_families }}) !important;
color: {{ settings.announcement_bar_text_color }};
background-color: {{ settings.announcement_bar_background }};
}
.announcement__bar-section .my-cart-text,
.announcement__bar-section .js-cart-count {
font-size: var( --topbar-font-size, {{ section.settings.announcement_text_size }}px) !important;
font-family: var(–main-family, {{ settings.main_font.family }}, {{ settings.main_font.fallback_families }}) !important;
}
.announcement__bar-section p {
font-size: var( --topbar-font-size, {{ section.settings.announcement_text_size }}px) !important;
}
.announcement__bar-section .slideout__trigger–open button.button-as-link:hover,
.announcement__bar-section .slideout__trigger–open button.button-as-link: visited,
.announcement__bar-section .disclosure__toggle:hover {
color: {{ settings.announcement_bar_text_color | color_lighten: 30 }};
}
.announcement__bar-section .disclosure-list {
background-color: {{ settings.announcement_bar_background }};
border: 1px solid {{ settings.announcement_bar_text_color }};
}
.announcement__bar-section .disclosure-list__option {
color: {{ settings.announcement_bar_background }};
text-transform: capitalize;
}
.announcement__bar-section .disclosure-list__option:focus, .disclosure-list__option:hover {
color: {{ settings.announcement_bar_text_color }};
border-bottom: 1px solid {{ settings.announcement_bar_text_color }};
}
.announcement__bar-section .disclosure-list__item–current .disclosure-list__option {
color: {{ settings.announcement_bar_text_color }};
border-bottom: 1px solid {{ settings.announcement_bar_text_color }};
}

{% if announcement_cart %}
.header__shopping-cart { display: none; }
{% endif %}

{% endstyle %}

{% schema %}
{
“name”: “Announcement bar”,
“settings”:
[
{
“type”: “richtext”,
“id”: “announcement_text”,
“label”: “Text”,
“default”: “

Share a shop announcement or message

”
},
{
“type”: “range”,
“id”: “announcement_text_size”,
“min”: 13,
“max”: 24,
“step”: 1,
“unit”: “px”,
“label”: “Text size”,
“default”: 14
},
{
“type”: “link_list”,
“id”: “top_nav”,
“label”: “Add additional links with a menu”
},
{
“type”: “checkbox”,
“id”: “announcement_cart”,
“label”: “Cart links in announcement bar”,
“info”:“Not recommended if country/region selector enabled”,
“default”: false
},
{
“type”: “header”,
“content”: “Language Selector”,
“info”: “To add a language, go to your language settings.”
},
{
“type”: “checkbox”,
“id”: “show_locale_selector”,
“label”: “Enable language selector”,
“default”: false
},
{
“type”: “header”,
“content”: “Country/Region Selector”,
“info”: “To add a country/region, go to your payment settings.”
},
{
“type”: “checkbox”,
“id”: “show_country_selector”,
“label”: “Enable country/region selector”,
“default”: false
}
]
}
{% endschema %}

[suyash1]

@sarahche - can you please share your website link?

[sarahche]

Hey Suyash, thanks for getting back to me. My page is currently password protected and the enter password box is not visible. I can send you code of a certain page/section and/or a screenshot if that helps?

[suyash1]

@sarahche - screen shot or code do not work as this is css task, if it is password protected then can you share it on my email? I can send you css

[sarahche]

Hey Suyash, my password page does not have the enter password section - it is hidden. I am launching my shop in 2 days so I will send it to you then

[suyash1]

@sarahche - ok sure

[sarahche]

Hi Suyash

Thanks for your patience

My site link is www.fawnswim.com

Thanks in advance

[suyash1]

@sarahche - add this css to the very end of your stylesheet.css file and check, adjust number as per the need

.announcement__bar-section {line-height: 30px;}

[sarahche]

Thank you so so much! That looks so much better really appreciate your help.

[veravi]

Hey, how do i find stylesheet.css location

[veravi]

Hi, this doesn’t work for my site, can you assist?

www.veravifashion.com

[suyash1]

@veravi - please add this css to the very end of your base.css file and check

@media screen and (min-width: 990px){
.announcement-bar .slider-button {height: 2.8rem;}
.announcement-bar__message{padding: 0rem 0; min-height: 1.8rem;}
}

[veravi]

Hi, this doesn’t seem to have worked, the depth of the banner box height is still the same.

I am hoping I can reduce the banner box height on both the desktop and the mobile version of the site.

Thanks