Hello! I want to make the footer of my website to look like the header. Right now my footer has the text and menu stacked vertically on top of each other
but I want it to look like this:
As you can see in this website example above, their header and footer look the same.
I am using the Turner theme. Thank you!!
Hey @oshop0307
The footer which you’re referring to looks like a custom coded footer but worth checking your store as well. Maybe I can provide you some CSS which can make your footer similar to that. Can you share your store URL and Password (if enabled) ?
Best,
Moeed
Hey @oshop0307 Welcome to Shopify Community can you please share the Website URL
OUMMI password: magenta
Hey @oshop0307
Follow these Steps:
<style>
@media screen and (min-width: 768px) {
.footer--block {
width: 100% !important;
max-width: 100% !important;
}
.footer--block-text-heading.text-heading.w-full.sub-heading.tablet-align-left.desktop-align-left.mobile-align-left {
text-align: -webkit-center !important;
padding-top: 15px !important;
}
.w-full.desktop-align-left.tablet-align-left.mobile-align-left {
min-width: auto !important;
text-align: -webkit-center !important;
}
}
</style>
RESULT:
Best,
Moeed
hey @oshop0307 i think you want this one if yes then try this one by following these steps
Go to online store ----> themes ----> go to three Dots ----> edit code ---->find theme.liquid files ----> place the code ---->before the </body>tag if this code work please do not forget to like and mark it solution
<style>
@media screen and (min-width: 768px) {
.footer--block-menu-menu.w-full.tablet-justify-left.desktop-justify-left.mobile-justify-left {
display: grid !important;
grid-template-columns: 1fr 1fr 1fr !important;
gap: 34rem !important;
}
}
</style>
is there a way to do this and take out “footer menu”? thanks in advance!
Where do I add the code here? And is there a possiblity to get rid of the words “footer menu”? thanks in advance!
Hey @oshop0307
Add this updated code in theme.liquid file right above </body>
<style>
@media screen and (min-width: 768px) {
.footer--block {
width: 100% !important;
max-width: 100% !important;
}
.w-full.desktop-align-left.tablet-align-left.mobile-align-left {
min-width: auto !important;
text-align: -webkit-center !important;
}
.footer .footer--block .footer--block-menu .footer--block-menu-menu {
flex-flow: row !important;
padding-top: 15px !important;
}
}
.footer--block-text-heading.text-heading.w-full.sub-heading.tablet-align-left.desktop-align-left.mobile-align-left {
display: none !important;
}
</style>
RESULT:
Best,
Moeed
Thanks so much! Where do I add it above ? And is it possible to make the “CONTACT” go all the way left and “INSTAGRAM” and "NEWSLETTER go all the way right? Thanks in advance
thank you very much for your help, it worked
Hi Moeed,
I would really love your help one last time! As you can see in my last response, there is a <> symbol in my website after i added the code. How do I get rid of it?
This is probably coming from your theme.liquid file where you might have misplaced a code somewhere that led to it. So double check that first, and if you’re not able to find it then feel free to drop your collaborator request code in my private messages and I’ll sort it out.
Cheers,
Moeed
