Have your say in Community Polls: What was/is your greatest motivation to start your own business?

Re: Sticky Sidebar and menu in Simple Theme

How can I make the sidebar and menu sticky in Simple Theme?

soyibo
Tourist
3 0 4

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!

Replies 12 (12)

FreshNarrative
Shopify Partner
133 19 27

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
Cocoa Beach, Florida

Monday - Friday | 9 AM — 5 PM EST
soyibo
Tourist
3 0 4

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 2

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?

 

roriekukard
Tourist
3 0 0

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

FreshNarrative
Shopify Partner
133 19 27

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
Cocoa Beach, Florida

Monday - Friday | 9 AM — 5 PM EST
roriekukard
Tourist
3 0 0

hi

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

thank you 

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

patrickanthony
Excursionist
23 2 6

@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;
}
}

Respectfully,
Patrick
patrickanthony
Excursionist
23 2 6

@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;
}
}

Respectfully,
Patrick
patrickanthony
Excursionist
23 2 6

@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;
}
}

Respectfully,
Patrick
Fortunebaby
Tourist
15 0 2

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:

Screenshot 2023-08-03 at 9.10.42 PM.png

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

Fortunebaby
Tourist
15 0 2

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