Shopify themes, liquid, logos, and UX
To continue receiving payouts, you need to secure your account by turning on two-step authentication. If two-step authentication is not turned on your payouts will be paused. Learn more
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!
Hi Soyibo,
Post your sites URL and I'll provide you the code for your theme.
Thanks!
Kyle Kopelke
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!
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?
did you manage to fix that problem with the menu running past the footer?
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.
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
@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;
}
}
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;
}
}
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;
}
}
User | RANK |
---|---|
121 | |
95 | |
74 | |
63 | |
47 |
Learn these 5 things I had to learn the hard way with starting and running my own business
By Kitana Jan 27, 2023Would you love to unleash the unbridled power of the Google Shopping Channel into your sho...
By Gabe Jan 6, 2023How can you turn a hobby into a career? That’s what Emmanuel did while working as a wa...
By Skye Dec 30, 2022