How do i make my footer sticky and constantly visible to my visitors? I am using the footer to market that my work is featured on credible new source.
Where can i add the code to make it work on spotlight theme?
2 Likes
Let try to add this custom CSS to your theme settings at:
Admin → Sale channels → Online Store → Themes → click Customize your current theme → tab Theme Settings at left → scroll to bottom section “Custom CSS”, then add this code:
.shopify-section-group-footer-group {
position: sticky;
bottom: 0;
}
it will always sticky at bottom as you want:
Hello there @Wholejinggang You should try this code here
main {
/* make sure to cover the screen */
min-height: 100vh;
/* need a solid bg to hide the footer */
background: white;
/* put it on top */
position: relative;
z-index: 1;
padding: 2rem;
}
footer {
/* place on the bottom /
position: sticky;
bottom: 0;
left: 0;
width: 100%;
background-color: #252a47;
display: grid;
place-items: center;
padding: 50px; / depends on the height of your footer content */
}
Let me know if this works for you!
You can do that by simply add this code to Custom CSS in Sales Channels > Online Store > Themes > Customize > Theme settings
#shopify-section-sections--19250332893405__footer {
position: sticky;
bottom: 0;
}
CSS only solution would not look great as you either have very large entire footer group stuck at the bottom of your screen or need to hide the bottom part of the footer group completely.
Go to Customize, scroll down to the “Footer” section group and add a “Custom liquid” section at the bottom.
Paste this code:
Hello @Wholejinggang
Go to online store ----> themes ----> actions ----> edit code ----> base.css
add this code at the end of the file and save.
#shopify-section-sections--19250332893405__footer {
position: sticky;
bottom: 0;
}
result
If this was helpful, hit the like button and accept the solution.
Thanks