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

Solved
Tourist
3 0 1

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

0 Likes
Shopify Expert
665 170 199

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

On The Map Marketing | Developing custom Shopify Sites & Apps is our thing

- Install our latest app Accessibly - Makes your store accessible for everyone, helps to avoid fines
- Inc 5000 | Shopify Parners | 20+ stores launched | 300+ active clients
- Need help with your Shopify store? Reach out to us!
0 Likes
Tourist
3 0 1

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.

 

 

Screenshot_2019-11-07 AbTech Industries ~ Customize ~ Debut ~ Shopify.png

0 Likes

Success.

Shopify Expert
665 170 199

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;
  }
}
On The Map Marketing | Developing custom Shopify Sites & Apps is our thing

- Install our latest app Accessibly - Makes your store accessible for everyone, helps to avoid fines
- Inc 5000 | Shopify Parners | 20+ stores launched | 300+ active clients
- Need help with your Shopify store? Reach out to us!
1 Like
Tourist
3 0 1

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

1 Like