Sticky header and sticky announcement bar debut

Technical Q&A
1

i Tried to make my header and announcement bar sticky and now they are overlapping

Meitza_0-1623622157590.png
Meitza_0-1623622157590.png1800×143 103 KB

store link: https://l1q8c769h9sesqel-57576685776.shopifypreview.com

any help ?

2

I try to fix it an now look like this

Meitza_0-1623630630367.png
Meitza_0-1623630630367.png1845×176 48.9 KB

3

Hi @Meitza

Can you please share working URL of your shop?

So we can help you with this problem,

4

pw: farauy

https://be-splendid-123.myshopify.com/

5

hello @Meitza

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

#shopify-section-header{
    position: fixed;
    z-index: 500;
}
.site-header{
    position: fixed;
    z-index: 500;
    top: 50px;
}
.main-content{
        padding-top: 185px;
}
@media screen and (max-width: 769px){
.main-content{
    padding-top: 129px;
}
}
1 Like
6

Hey @Meitza

Thanks for getting back to me.

Here is the solution:

  1. In order for the header to be fixed and be at the top of the page, you only need to remove the position: fixed property from the class element .template-index. site-header
  2. If you want the header to remain at the top even when scrolling, you need to add the following CSS styles (and also remove the property specified in the first paragraph):

In file assets/theme.css

В файле assets/theme.css

#shopify-section-header {
position: fixed;
z-index: 9;
width: 100%;
}

#PageContainer {
padding-top: 120px;
}

Hope that helps you.

2 Likes
7

Meitza_0-1623661576649.png
Meitza_0-1623661576649.png1320×174 15.5 KB

Now i have this issue

8

You have forgotten to add “width” element to your code.

#shopify-section-header 
{
position: fixed;

z-index: 9;

width: 100%;
}
1 Like
9

Now header and announcement bar look to big how can i make it smaller ?

10

Hey @Meitza

Thanks for getting back to me:

Change this code in theme.scss file, read carefully please.

There is some comments from our part.

.gd-free-shipping-bar {
    background-color: #000000;
    text-align: center;
    width: 100%;
    display: block;
    padding: 15px 10px; - change to - padding: 10px;
    margin: 0 auto 5px; - remove this line
}
.site-header {
    position: fixed;
    z-index: 500;
    top: 50px; - change to - top: 40px;
}
.site-header__logo {
    margin: 15px 0;  - change to - margin: 10px 0;
}

Hope that helps you.

1 Like
11

Hi

have tried making the header fixed, working fine - but the drop down menus are also fixed, and not scrollable if they are longer than the viewport height. what would be a fix to allow for a sticky header but the menus are still scrollable?