Sticky header disrupts when scrolling down Debut theme

Highlighted
New Member
4 0 0

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,

 

0 Likes
Highlighted
Explorer
45 11 11

@Begus,

 

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

Was your problem solved? Please mark this post as an Accepted Solution
0 Likes
Highlighted
New Member
4 0 0

Sure! 

bouloworld.com

and the password is : cowcho

 

Thanks!

 

0 Likes
Highlighted
Explorer
45 11 11

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.

Was your problem solved? Please mark this post as an Accepted Solution
0 Likes
Highlighted
New Member
4 0 0

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!

0 Likes
Highlighted
New Member
4 0 0

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,

 

0 Likes
Highlighted
Explorer
45 11 11

@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.

Was your problem solved? Please mark this post as an Accepted Solution
0 Likes