Mobile navigation scrolling with sticky header

When using a long or nested navigation and sticky header, you may find a scrolling issue where the navigation won't scroll down the nested tree or long list of menu items. In order to avoid this conflict, there are two settings you can use in the Header section settings:

Option 1: Change to Sticky header only when scrolling up

In the Sticky Header section, change the Header behavior to "Sticky header only when scrolling up":

This will add the sticky effect only when scrolling up on a page. This will resolve sticky and navigation downward scrolling conflicts. 

OR

Option 2: Change to default behaviour

This option turns off sticky header. This also prevents a conflict from occurring and provides a clean user experience: 

Save your theme editor settings after making the change:

Code option - Turn of sticky scrolling for mobile navigation

This option allows you to maintain the sticky header when using the desktop navigation but turns it off completely for mobile. The result is an alternate method to avoid navigation scrolling issues with a sticky header. 

Code snippet to use:

/* -- Start Pipeline override code disable sticky header for mobile navigation -- */
.header--sticky .site-header.showMobile{
  position: relative !important;
  animation: none !important;
}
.main-content{
  padding-top: 0 !important;
}
/* - end - */

Where do I add the code?

Use this link to learn where exactly to add this code snippet:

Where to add your CSS style code