[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!!

[WebAccoustic]

I have been using Debut theme and I found another issues that we cannot apply the position fixed propery to any div without scrolling the page.. Somehow I am able to apply it but page is scrolling at the backside.. Is there any specific css is added by the theme developer that causes the issue.  

I just want to popup on click with fixed position but dont want to scroll the page. I can do this by adding the css to body tag overflow hidden but its like a page is move a little bit to left when popup appear.  Theme developer please suggest if you added this kind of css that causes the issue with fixed element. We really want to fix this