Shopify themes, liquid, logos, and UX
Dear all,
I need to change the footer menu to vertical. Any hint?
Thanks, Dimitri
Solved! Go to the solution
This is an accepted solution.
Hello, @dimitri9
Thanks for URL.
1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
.site-footer__linklist-item { width: 100%; } .site-footer__item { margin-bottom: 0; }
Hello, @dimitri9
Thanks for post.
Please share your site URL, So I will check and provide a solution here.
This is an accepted solution.
Hello, @dimitri9
Thanks for URL.
1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
.site-footer__linklist-item { width: 100%; } .site-footer__item { margin-bottom: 0; }
Ok many thanks! 🙂 Need to edit the code.
Thanks so much!! This totally worked and super quick!
Thanks for your compliment
Worked great for my shopify store, easy to do, thanks so much
Thanks for update.
You're awesome!!!! This worked on my debut theme. Thank you for this!!!
Thanks for update and support
Can you do the opposite way @KetanKumar ? trying to figure out how to go from a vertical footer menu to a horizontal footer menu.
Im a little stuck
Thanks 🙂
Hello, @pine
Welcome to the Shopify community!
and Thanks for your Good question.
Please share your site URL,
So I will check and provide a solution here.
Thanks for getting back so quickly @KetanKumar
Site URL is www.thepineco.com.au I just want it horizontal on desktop view, not mobile.
Thanks 🙂
Thanks for update
yes, please add this code
1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
@media only screen and (min-width: 768px) {
.links-footer ul li {
display: inline-block;
padding: 0px 5px;
}
}
Heyy! I have tried add this code but its still not changing my menu from horizontal to vertical - I'm not very tech savvy! Could you let me know what I am maybe doing wrong? My URL is https://scenes-of-beauty.myshopify.com
Thanks
oh, sorry for this issue can you please try this
1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css ->paste below code at the bottom of the file.
this code apply for after 5 - 6 second
@media only screen and (min-width: 750px) {
ul.site-footer__linklist.list--inline {
display: flex;
flex-direction: column;
}
}
Thank you so much! This worked and looks so much better.
Another question on footers, do you know how I split the menu into 2 lists? Right now it appears on just one.
Thanks
Chloe
it's my pleasure to help us.
yes footer it possible to more customization code can you please send personal message
Hello @KetanKumar,
I tried adding this code for two of my websites.
It works, but the last item is indented and not centre aligned.
How do I fix this?
See attached images.
Sorry you are facing this issue, it would be my pleasure to help you.
Welcome to the Shopify community!😊
Thanks for your good question.
Please share your site URL,
I will check out the issue and provide you a solution here.
Hello @KetanKumar,
would you be able to help me with this. I am trying to change my footer horizontal columns similar to what the boundless theme looks like, are you able to assist? my website url is: https://behind-the-bag.com/
sorry for that issue
your store is password protect
thanks but doesn't work
Hey all ~ this has been the most helpful post for me and my debut theme. I was able to get mine to look the way I wanted to using the code supplied here. I'll refine it more in the future... but I at least have my starting point.
DISCLAIMER: I am a novice coder... so this is probably riddled with junk but... it works for what I need for now. If you care to see what it looks like you can check out my footer at MY SITE.
Thanks for all the help from everyone! You're an awesome community!
/*================ ADDED VERTICAL FOOTER ================*/
/* force quick links to show one per line */
ul.site-footer__linklist.list--inline {
display: block;
column-count: 3;
column-width: 35px;
column-gap: 10px;
}
@media only screen and (max-width: 750px) {
ul.site-footer__linklist.list--inline {
position: relative;
text-align: center;
padding: 0 0 0 50%;
display: block;
column-count: 1;
column-width: 35px;
line-height: 10pt;
}
}
Happy to help! ^_^
Hi @Sugarcoated , Im trying to apply this code to theme.css in Assets -is that the right place or should it go somewhere else?
Many thanks for any help!
Sorry you are facing this issue, it would be my pleasure to help you.
Welcome to the Shopify community!😊
Thanks for your good question.
Please share your site URL,
I will check out the issue and provide you a solution here.
Yes! Sorry I was not specific before but you want to add this CSS code to the bottom of your Theme.CSS file in Assets.
I hope that works for you 🙂 Good luck!
1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
.site-footer__linklist-item { width: 100%; } .site-footer__item { margin-bottom: 0; }
There is no caterogy under asset /theme.scss.liquid->
The same for me in "Assets" I don't have a file : theme.scss.liquid, where should I put the code ?
Hi @Triko were you able to figure this out? i am having the same issue, i cannot find theme.scss.liquid file in my store settings.
Hello,
Can you please help me do the same?? I would like my footer navigation to be vertical & centered, please! (Studio theme)
My URL is: https://www.littlelocker.com.au/
Thank you !
Hello, I dont have the asset option theme.scss.liquid to paste the code as instructed in my dawn theme.
I am also trying to stack my footer menu vertically on left hand side in one column.
It only gives me theme-editor.js
Can you help please?
Thanks caroline
I am unable to find theme.scss.liquid instead I could just find theme.editor.js. Is it ok if i copy paste the above code under theme.editor.js ?
I am using craft as my website theme
Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024In today’s interview, we sat down with @BSS-Commerce to discuss practical strategies f...
By JasonH Nov 13, 2024