Sticky announcement bar, header fail, and divider line

[silenceclothing]

Hello!

I have just made my announcement bar sticky. It works perfect on homepage, but when i go to a another page f.example “contact” the header is suddenly not centered and is not covering the whole screen. Also the header covers the Title of the page. Can someone help me with this?

Also i want to add a border around sort and filter and place divider line between sections. Does someone know how to do this?

[DaisyVo]

Hi @silenceclothing

In order to fulfill your request, please follow these steps
Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code
Step 2: Search file theme.liquid
Step 3: Insert this code above

{% if template.name != "index" %}
{% style %}
main#MainContent {
    margin-top: 50px;
}
h1.collection-hero__title {
    text-align: center !important;
}
h2.facet-filters__label {
    border: 1px solid white !important;!I;!;
    padding: 5px !important;!
}
h2#verticalTitle {
    border: 1px solid white !important;!i;!;
    padding: 5px !IMPORTANT;
}
.facets__form .product-count {
    align-self: center !important;
}
{% endstyle %}
{% endif %}

Here is the result:

I hope this helps

Best,

Daisy

[Dan-From-Ryviu]

Hi @silenceclothing

Please add this code to Custom CSS in Online Store > Themes > Customize > Theme settings to solve it

html .section-header,
html .header-wrapper {
    position: sticky !important;
    top: 38px !important;
}

[silenceclothing]

after i did this it fixed so i can see the title of the page now, but the logo on the header is not centered, and a white boxs comes in the right.