How to fix a sticky header covering page title in debut theme?

Technical Q&A
1

Hey All,

I recently added a code to my debut theme to make the header sticky and now I am encountering an issue where the title of my pages is cut off.

Does anybody know how to fix it?

Thanks!

2

Please provide website url and if your store is password protected then also provide password

3

Hi @MandL ,

This is my recommendation for your problem. You should use css style “position: sticky” instead of “fixed”. You can try and please let know if you need further support.

Hope this helps!

4

Hi @LitExtension ,

Thank you so much for your reply!

When I try changing fixed to sticky the text turns from red to grey and then when I test my site, the fixed header no longer exists.

Here is the coding I am using that I added to my page:

#shopify-section-header {
position: sticky;
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

@MandL

Please share:

  • your store URL;
  • page URL with the issue you mention;
  • storefront password (if your store has one).

If the store is not online yet, please follow this quick tutorial to learn how to safely and temporarily share an offline/unpublished theme URL.

Only by taking a look at your website we are able to assist.

Kind regards,
Diego

6

Hi @MandL ,

Hope you are soing well.

On this selector “#shopify-section-header”, please add this snippet: min-height: 80px; (you can change 80px to your number you want). This problem can cause when you set absolute for child element.

Example:

#shopify-section-header {

position: sticky;

z-index:1000;

left:0;

right:0;

min-height: 80px;

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

}

Hope this helps!

7

Dear @MandL

Hope the following suggestions will help you

  • From your Shopify admin, go to Online Store > themes.
  • Locate your current theme and then click Actions > Edit code.
  • After that in the Assets folder, click to open your theme.scss.liquid file.
  • Go to the very bottom of this file and paste the following code:
/* Start */
 .sticky {position: fixed;top: 0;width: 100%;z-index: 999; max-width: 100%;background: #fff;-webkit-box-shadow: 0px 5px 22px -8px rgba(0,0,0,0.75);-moz-box-shadow: 0px 5px 22px -8px rgba(0,0,0,0.75);box-shadow: 0px 5px 22px -8px rgba(0,0,0,0.75);}
/* End*/
  • In the same Assets folder, click to open your theme.js file.
  • Go to the very bottom of this file and paste the following code:
// Start sticky Navbar 
$(window).scroll(function(){
    if ($(this).scrollTop() > 50) {
        $('.site-header').addClass('sticky');
    }
    else {
        $('.site-header').removeClass('sticky');
    }
});
// End sticky Navbar
  • Ensure that the code was copied exactly from this guide and pasted correctly, making sure no characters or symbols are missing.
  • Save and check your theme by refreshing it.