[Debut Theme] "Position: sticky;" only working on mobile version

[mabtech]

I created a sub navigation menu with the following code:

(Parent) #navs {
height: auto;
position: fixed;
display: block;
left: 0;
right: 0;
padding: 0;
top: 70px;
z-index: 1000;
}

(Sticky div) #subNav {
border-top: solid 2px #ffffff;
border-bottom: solid 3px #ffffff;
border-left: solid 1px #ffffff;
border-right: solid 1px #ffffff;
display: block;
position: sticky;
top: 0;
width: 105%;
height: 100%;
z-index: 99999;
}

The subnavigation menu sticks and behaves as intended on the mobile version of the website but as soon as the window size is enlarged to the desktop version, it doesn't stick anymore and doesn't scroll down with the rest of the page. Please help me with this.

Website information:

-link: https://abtech-industries.myshopify.com/pages/purification1

-password: piyoop

[OTM]

Hi, @mabtech ,

This is Evita from On The Map.

The navigation works great for me, see a screenshot - https://prnt.sc/ptwjsk

Did you clear the cache?

Windows

Hold both the Ctrl and ⇧ Shift keys and then press R

Mac

Hold both the Command and ⇧ Shift keys and then press R

Best,
Evita

[mabtech]

Hi Evita,

Thanks for your response! That's not the navigation menu I was referring to, the one in question is only found on the "Purification" page, please see attached screenshot.

[OTM · Accepted solution]

Ah yes, sorry.

Add this code:

1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss->paste bellow code in bottom of file

@media only screen and (min-width: 750px) {
   .page-container {
      -ms-transform: initial!important;
       -webkit-transform:  initial!important;
      transform:  initial!important;
  }
}

[mabtech]

That was it! It's working as intended now, thank you very much!!