Hello Everyone!
I am using the Shopify Prestige theme. I want to make my footer navigation appear in accordion style when being used on mobile only. Please help me. Thanks in advance.
Store Url: https://dream-tech-zone.myshopify.com/
Password: Admin
I want to keep it like this image.
Hello @dreamtechzone_5
you have to do some custom code for that kind of footer menu.
Hi @dreamtechzone_5 you have to edit code for that if you cant do then let me know
Follow this:
Go to Online Store->Theme->Edit code
section->footer.liquid → find class for “Footer__Title” and add below code just above this and add add svg code below that,
so final code will look like this :
## FAQ'S & POLICIES
Then add this css in Asset/theme.scss file
.mob_tab svg {display:none;}
@media screen and (max-width: 640px) {
.mob_tab svg { display: block; width: 25px; height: 25px; fill: #fff; }
.mob_tab { display: flex; justify-content: space-between; }
.Footer__Block .Linklist { display: none; } .Footer__Block .show ~.Linklist { display: block; }
.mob_tab.show svg { transform: rotate(180deg); }
}
Then add this Js in template/theme.liquid just above
this requires custom dev in footer section setting where you could create option of enabling according mode for every section.
similar thing we did for the below URL
https://ninjatransfers.com
Hi @dreamtechzone_5
You have to edit code for that as per below or add me staff will do for
open section/footer.liquid and find “Footer__Title” and add whole part in one DIV so it will look like below
## FAQ'S & POLICIES
Now add this css in Asset->theme.scss
.mob_tab svg {display:none;}
@media screen and (max-width: 640px) {
.mob_tab svg { display: block; width: 25px; height: 25px; fill: #fff; }
.mob_tab { display: flex; justify-content: space-between; }
.Footer__Block .Linklist { display: none; } .Footer__Block .show ~.Linklist { display: block; }
.mob_tab.show svg { transform: rotate(180deg); }
}
Now add this Js code in Theme.liquid file just below
So html code look like this
1 Like
Ok, Can you give me the code and where should I paste it?
HI @dreamtechzone_5 i can send you or i can do in your theme if you can add me staff
Best regard
Where do I paste this code?
You can place below code above line “33”
and below code above line “35”
1 Like
Thank you so much. It worked. I appreciate it.
But when I click on arrow the submenus don’t show but when I click on menu the submenus show. There is a lot of space under the menu, can the space be reduced? And follow us menu icons can be kept as dropdown?
And want to keep the size of the 4 columns same in desktop mode. There are a lot of empty spaces here.
For space you can add this css:
.Footer__Title{margin-bottom:0 !important;}
.Footer__Block{13px !important}
and for arrow click need more html changes and need store access
and it will only work for menu link not for other part
1 Like
Where do I paste this code?
.Footer__Title{margin-bottom:0 !important;}
.Footer__Block{13px !important}
And want to keep the size of the 4 columns same in desktop mode. There are a lot of empty spaces here.
Add code in Asset->theme.scss at bottom
and for desktop footer i can see all 4 column fine
Best regard