Sticky Sidebar and menu in Simple Theme

soyibo
Tourist
2 0 2

Hi! I have a question about the Sticky theme.

I'm trying to make the sidebar menu stick when you scroll to the top on desktop, and to make the hamburger menu stick to the top when you scroll on a mobile device.

I searched the community and found this code: https://codepen.io/ikhwanb/pen/VwZKLOw

But can't seem to make it work. Does anyone have a solution for this? I'm editing both the theme.scss.liquid file and the theme.js.liquid file.

 

thanks!

0 Likes

Hi Soyibo,

Post your sites URL and I'll provide you the code for your theme.

Thanks!

Kyle Kopelke

Let's get Shopify figured out together. Get live USA-based customer service for your current or upcoming web project.
Email: hello@freshnarrative.io | tel: (443) 345-8162
Baltimore, Maryland, United States
We offer free and paid Shopify support.
Monday - Friday | 9 AM — 5 PM EST
0 Likes
soyibo
Tourist
2 0 2

Hi! I actually figured it out! 

The website: https://www.illumitees.com/

I added:

div.grid {align-items: flex-start; }

#shopify-section-sidebar{

    z-index: 9999999;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    }

To the theme.scss.liquid file and it worked!

Ideagen_la
Excursionist
17 1 1

excellent work @soyibo !

 

Only problem is that I noticed it doesn't stop for the footer, and just overlaps it.

Ideagen_la_0-1603636248953.png

do you perhaps know of a way to prevent this?

 

0 Likes
roriekukard
Tourist
3 0 0

did you manage to fix that problem with the menu running past the footer?

0 Likes

You can make the footer's position relative and set the z-index to 9999.

If you post your store I can show you were to put the code if you need help.

Let's get Shopify figured out together. Get live USA-based customer service for your current or upcoming web project.
Email: hello@freshnarrative.io | tel: (443) 345-8162
Baltimore, Maryland, United States
We offer free and paid Shopify support.
Monday - Friday | 9 AM — 5 PM EST
0 Likes
roriekukard
Tourist
3 0 0

hi

yes please show me the code and where to put it. www.goodysshop.co.za 

thank you 

0 Likes
Truethnics
Tourist
5 0 1

Hi,

 

I am facing the same issue. The footer overlaps the sidebar menu when the page is scrolled down. Where do I change the z index as mentioned by you?

 

Thanks

Truethnics

0 Likes