[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
667 170 235

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
Shopify Expert
667 170 235

This is an 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;
  }
}
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!
Tourist
3 0 1

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

New Member
6 0 0

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

0 Likes