Shopify themes, liquid, logos, and UX
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 |
---|---|
220 | |
151 | |
60 | |
54 | |
46 |
Thanks to all Community members that participated in our inaugural 2 week AMA on the new E...
By Jacqui Mar 10, 2023Upskill and stand out with the new Shopify Foundations Certification program
By SarahF_Shopify Mar 6, 2023One of the key components to running a successful online business is having clear and co...
By Ollie Mar 6, 2023