Sticky Sidebar and menu in Simple Theme

[soyibo]

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!

[FreshNarrative]

Hi Soyibo,

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

Thanks!

Kyle Kopelke

[soyibo]

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]

excellent work @soyibo !

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

do you perhaps know of a way to prevent this?

[roriekukard]

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

[FreshNarrative]

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.

[roriekukard]

hi

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

thank you 

[Truethnics]

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

[patrickanthony]

@Truethnics

If you still need it. I did this to solve that issue. Add this to theme.scss.liquid

// code for sidebar navigation to be sticky - added by Patrick Anthony 
div.grid {align-items: flex-start; }

#shopify-section-sidebar{

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

// code for sidebar navigation to have white background - added by Patrick Anthony 4/10/22
[data-section-id="sidebar"] nav{
background: #FFFFFF;
opacity:.9;
}

// code for sidebar navigation to scroll behind footer menu rather than infront - added by Patrick Anthony 4/10/22
#SearchDrawer {
z-index:1001;
}

#shopify-section-footer {
position: relative;
z-index:1000;
left:0;
right:0;
background-color: {{ settings.color_body_bg }};
}

#PageContainer {
padding-top: 80px;
}

@media screen and (max-width: 749px) {
#PageContainer {
padding-top: 70px;
}
}

[patrickanthony]

@roriekukard

If you still need it. I did this to solve that issue. Add this to theme.scss.liquid

// code for sidebar navigation to be sticky - added by Patrick Anthony 
div.grid {align-items: flex-start; }

#shopify-section-sidebar{

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

// code for sidebar navigation to have white background - added by Patrick Anthony 4/10/22
[data-section-id="sidebar"] nav{
background: #FFFFFF;
opacity:.9;
}

// code for sidebar navigation to scroll behind footer menu rather than infront - added by Patrick Anthony 4/10/22
#SearchDrawer {
z-index:1001;
}

#shopify-section-footer {
position: relative;
z-index:1000;
left:0;
right:0;
background-color: {{ settings.color_body_bg }};
}

#PageContainer {
padding-top: 80px;
}

@media screen and (max-width: 749px) {
#PageContainer {
padding-top: 70px;
}
}

[patrickanthony]

@Ideagen_la If you still need it. I did this to solve that issue. Add this to theme.scss.liquid

// code for sidebar navigation to be sticky - added by Patrick Anthony 
div.grid {align-items: flex-start; }

#shopify-section-sidebar{

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

// code for sidebar navigation to have white background - added by Patrick Anthony 4/10/22
[data-section-id="sidebar"] nav{
background: #FFFFFF;
opacity:.9;
}

// code for sidebar navigation to scroll behind footer menu rather than infront - added by Patrick Anthony 4/10/22
#SearchDrawer {
z-index:1001;
}

#shopify-section-footer {
position: relative;
z-index:1000;
left:0;
right:0;
background-color: {{ settings.color_body_bg }};
}

#PageContainer {
padding-top: 80px;
}

@media screen and (max-width: 749px) {
#PageContainer {
padding-top: 70px;
}
}

[Fortunebaby]

Hi! This code worked perfectly, however, because my menu is a bit long, when you scroll down to the footer the menu is visible behind it. Is there any way I can trigger the sticky navigation to stop once it hits the footer? 

Attaching a picture for reference:

Any help would be very much appreciated! Thank you! 🙂

[Fortunebaby]

in addition to my previous question, is there any way to have the sticky nav on desktop only and not mobile?