Debut Theme -Page moving behind Sticky header when scrolling down

Jad79
Tourist
11 0 1

Hello, Page moving behind Sticky header when scrolling down. You can check the issue in the below link:

https://simple-cozy.com/?_ab=0&_fd=0&_sc=1

I'm using geo shipping bar as announcement bar.

Jad79_0-1627603021518.png

Jad79_2-1627603105903.png

I just want the header to stay at the top of the page when i scroll down.

 

Thank you. 

 

 

0 Likes

Hi,

I just gone through your store. Header is not fixed?

there is no announcement bar .

If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
0 Likes
Jad79
Tourist
11 0 1

Hello, please disregard the link, it is an old version, and check the screenshots. When I scroll down, see how the page scroll behind the sticky header.

 

Thank you. 

0 Likes

This will make the whole header sticky, including the announcement bar.

@Jad79 

Zworthkey_0-1627630508550.jpeg

 

  1. From your Shopify admin, go to Online Store > Themes.
  2. Locate your Debut theme and then click Actions > Edit code.
  3. In the Assets folder, open your theme.scss.liquid file.

    Zworthkey_1-1627630508547.jpeg

     

  4. Go to the very bottom of this file and paste the following code:

    #SearchDrawer {
      z-index:1001;
    }
    
    #shopify-section-header {
      position: fixed;
      z-index:1000;
      left:0;
      right:0;
      -webkit-box-shadow:0px 2px 4px 0px rgba(0,0,0,.1);
      -moz-box-shadow:0px 2px 4px 0px rgba(0,0,0,.1);
      -ms-box-shadow:0px 2px 4px 0px rgba(0,0,0,.1);
      -o-box-shadow:0px 2px 4px 0px rgba(0,0,0,.1);
      box-shadow:0px 2px 4px 0px rgba(0,0,0,.1);
      background-color: {{ settings.color_body_bg }};
    }
    
    #PageContainer {
      padding-top: 80px;
    }
    
    @media screen and (max-width: 749px) {
    #PageContainer {
      padding-top: 70px;
    }
    }
  5. In the same Assets folder, click to open your theme.js file.
  6. Go to the very bottom of this file and paste the following code:

    function headerSize() {
      var $headerHeight = $('div#shopify-section-header').outerHeight();
      $('#PageContainer').css('padding-top', $headerHeight);
    }
    
    $(window).on("load", headerSize);
    $(window).on("resize", $.debounce(500, headerSize));
  7. Ensure that the code was copied exactly from this guide and pasted correctly, making sure no characters or symbols are missing.
  8. Save the file by using the button on the top right-hand side.
  9. Refresh your online store page and verify that the sticky header is working correctly!

Thank you.

If helpful, please Like and Accept Solution. if you Want to modify or Customize your theme, Hire us. or Want to know more. Read our Shopify Blogs.
Email us: sales@zworthkey.com Contact us: https://www.zworthkey.com/shopify-services/
0 Likes
Jad79
Tourist
11 0 1

I already added this code, the header is sticky but at the very top of the page. Also I dont want to have the announcement bar sticky.

Thank you.

 

0 Likes

@Jad79 ,

Your issue is solved or not?

If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
0 Likes