Sticky header and sticky announcement bar debut

Solved
Meitza
Tourist
6 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 ?

0 Likes
Meitza
Tourist
6 0 0

I try to fix it an now look like this 

Meitza_0-1623630630367.png

 

0 Likes
Speedimize
Shopify Partner
289 46 122

Hi @Meitza 

Can you please share working URL of your shop?

So we can help you with this problem,

 

We Speedimize your store
Have a problem with speed performance, send me email here: hello@speedimize.io


If our advice was helpful please LIKE or ACCEPT SOLUTION
0 Likes
Meitza
Tourist
6 0 0
Natztech
Shopify Partner
1385 389 943

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

 

Want to theme customize contact us E-mail : natztech2312@gmail.com
If helpful then please Like and Accept as Solution

PageFly Advanced Page Builder- My favorite drag and drop page builder - Visit the Shopify app store
Speedimize
Shopify Partner
289 46 122

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.
 
 
We Speedimize your store
Have a problem with speed performance, send me email here: hello@speedimize.io


If our advice was helpful please LIKE or ACCEPT SOLUTION
Meitza
Tourist
6 0 0

Meitza_0-1623661576649.png

Now i have this issue

0 Likes
Speedimize
Shopify Partner
289 46 122

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

 

We Speedimize your store
Have a problem with speed performance, send me email here: hello@speedimize.io


If our advice was helpful please LIKE or ACCEPT SOLUTION
Meitza
Tourist
6 0 0

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

0 Likes
Speedimize
Shopify Partner
289 46 122

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. 

We Speedimize your store
Have a problem with speed performance, send me email here: hello@speedimize.io


If our advice was helpful please LIKE or ACCEPT SOLUTION