Sticky header disrupts when scrolling down Debut theme

[Begus]

Hi!

I am using Debut theme and I asked shopify theme design team to make the menu bar sticky (not the logo). They successfully completed this task however when scrolling down, there is a very annoying disruption; once enough pixels are scrolled down, the logo on the header (the not sticky bit) disappears very sharp. After logo disappears the scroll down continues smoothly. 

Would very much appreciate if someone can help me with making the sticky header disappear more smoothly rather than disappearing 100% at once (this is what I mean by sharp).

Thank you,

[ThemuMitch]

@Begus,

Please could you provide a link to your store and I'll take a look?

[Begus]

Sure! 

bouloworld.com

and the password is : cowcho

Thanks!

[ThemuMitch]

I've identified some lines in your theme.js file that are causing the issue. These are:

$('.site-header__mobile-nav').hide();
$('.site-header.logo--center').hide();

and...

$('.site-header__mobile-nav').show();
$('.site-header.logo--center').show();

I'm afraid I can't offer a fix myself as I'd be overwriting the work of the Shopify team, but I would try to contact them again and point them to this post.

Technical mumbo jumbo incoming: ask if there's a way to hide the logo without the use of display: none; (which the above jQuery methods use) and instead with the use of the opacity, transform: translateY or visibility: hidden CSS properties to achieve a smoother transition.

I hope this helps.

[Begus]

Hi!

Thanks a lot! I contacted the support and hopefully they will help me. I can let you know then if your suggestions worked or not

Many thanks!

[Begus]

Hi again

Is there a way you can help me with this?

I have reached out to shopify but they are not able to help me.

hope you can.

Thanks,

[ThemuMitch]

@Begus,

First, navigate to the Shopify online code editor. If you haven't done this before, check out this link:

https://shopify.dev/tutorials/develop-theme-getting-started-choosing-an-editor

Here, you want to modify 2 files:

1. theme.css.liquid (found in the Assets folder)
2. theme.js (found in the Assets folder)

NOTE: Before editing your theme code, it's important to save a backup of your theme.

theme.css.liquid

At the bottom of the theme.css.liquid file, add the following code:

.site-nav {
  margin-top: 0;
  padding-top: 25px;
}

theme.js

Scroll down to the bottom of the theme.js file. Find the line with this comment:

// Sticky header - change on September 11 2020 by Sofy M @ Shopify Theme Support

... and delete the line and all lines below it. In their place, add the following code:

(function () {
  if (!window.matchMedia('(min-width:750px').matches) {
    return;
  }

  var isNavFixed = false;
  var header = document.querySelector('.site-header');
  var nav = document.querySelector('#AccessibleNav');
  var headerPaddingBottom = nav.offsetHeight + 'px';
  var scrollThreshold = nav.offsetTop;

  window.addEventListener('scroll', function () {
    if (window.scrollY >= scrollThreshold) {
      if (!isNavFixed) {
        header.style.paddingBottom = headerPaddingBottom;
        nav.style.backgroundColor = '#ffa217';
        nav.style.position = 'fixed';
        nav.style.top = 0;
        nav.style.width = '100%';
        nav.style.zIndex = 10;
        isNavFixed = true;
      }
    } else {
      if (isNavFixed) {
        header.removeAttribute('style');
        nav.removeAttribute('style');
        isNavFixed = false;
      }
    }
  });
})();

Following these changes, the centered logo will scroll as normal whereas the navigation menu will stick to the top of the page, on tablet and desktop. Mobile is unaffected. Note that these changes were tested on a brand new Debut theme with no apps installed. Other custom changes to the theme files or installed third-party apps may alter the expected behaviour.

I hope this helps.

[diego_ezfy]

@Begus 

I have coded a professional, highly tested solution for this if you'd like to try.

You can download/install it for free under 1 minute, just click here to read the tutorial.

Besides that you also have options to turn it on/off at the customize page, even to allow it only on desktop or mobile depending on your needs.

Kind regards,
Diego