Debut Theme -Page moving behind Sticky header when scrolling down

Jad79
Tourist
14 0 2

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. 

 

 

Replies 6 (6)

oscprofessional
Shopify Partner
15830 2369 3071

Hi,

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

there is no announcement bar .

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
Jad79
Tourist
14 0 2

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. 

Zworthkey
Shopify Partner
5581 642 1565

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.

Jad79
Tourist
14 0 2

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.

 

oscprofessional
Shopify Partner
15830 2369 3071

@Jad79 ,

Your issue is solved or not?

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
timberwoodsc
Shopify Partner
6 0 0

Thank you for the great code!