Remove space on top of header for pages not displaying announcement bar (debut)

Solved
SethN1
Excursionist
33 1 3

Hi, I have the following code installed in theme.liquid to hide my announcement bar on two of my pages,

 

{% if page.handle == 'germs-on-toothbrushes' %}
<style>
.announcement-bar {display: none!important;}
</style>
{% endif %}
  {% if page.handle == 'toothbrush-sanitizer-effectiveness' %}
<style>
.announcement-bar {display: none!important;}
</style>

 

however, I have now noticed that there is a massive blank space on top of my header: 

Screen Shot 2021-08-05 at 9.50.15 AM.png

 How can I fix this space? Website: uvteeth.com. Thank you so much in advance.

chickencoder
Shopify Partner
8 4 5

This is an accepted solution.

Hi Seth,

The reason there's still a gap at the top one the pages where the announcement bar is hidden is because the CSS rules that push the header down to accommodate for the announcement bar are still in place.

I've also simplified your logic to make the code easier to maintain.

{% if page.handle == 'germs-on-toothbrushes' or page.handle == 'toothbrush-sanitizer-effectiveness' %}
<style>
.announcement-bar { display: none!important; }
.announcement-bar + .site-header { top: 0px; }
</style>
{% endif %}

Hope this helps!

 

Jesse 

Developer @ Metafield
SethN1
Excursionist
33 1 3

It worked perfectly, thank you so much for the help! On another note, how could I reduce the space under my header? This is mainly just a problem for those two pages. 

Screen Shot 2021-08-05 at 10.43.54 AM.png

0 Likes
chickencoder
Shopify Partner
8 4 5

This is an accepted solution.

You could remove the main page padding which is probably off because you've removed the announcement bar.

{% if page.handle == 'germs-on-toothbrushes' or page.handle == 'toothbrush-sanitizer-effectiveness' %}
<style>
.announcement-bar { display: none!important; }
.announcement-bar + .site-header { top: 0px; }
#PageContainer { padding-top: 0px; }
</style>
{% endif %}
Developer @ Metafield
SethN1
Excursionist
33 1 3

Worked perfectly,

thank you!

0 Likes