Solved

Sticky header and sticky announcement bar debut

Meitza
Tourist
11 0 0

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

Meitza_0-1623622157590.png

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

any help ?

Accepted Solutions (3)
Not applicable

This is an accepted solution.

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.
 
 

View solution in original post

Not applicable

This is an accepted solution.

You have forgotten to add "width" element to your code. 

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

 

View solution in original post

Not applicable

This is an accepted solution.

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. 

View solution in original post

Replies 10 (10)

Meitza
Tourist
11 0 0

I try to fix it an now look like this 

Meitza_0-1623630630367.png

 

Not applicable

Hi @Meitza 

Can you please share working URL of your shop?

So we can help you with this problem,

 

Meitza
Tourist
11 0 0
Kinjaldavra
Shopify Partner
2302 570 1422

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;
}
}

 

Not applicable

This is an accepted solution.

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.
 
 
Meitza
Tourist
11 0 0

Meitza_0-1623661576649.png

Now i have this issue

Not applicable

This is an accepted solution.

You have forgotten to add "width" element to your code. 

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

 

Meitza
Tourist
11 0 0

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

Not applicable

This is an accepted solution.

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. 

MrGrif
Shopify Partner
22 2 4

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? 

MrGrif