Accordian Style For Footer Menu - Shopify Prestige Theme

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:

  1. Go to Online Store->Theme->Edit code
  2. 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

  1. 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?

FAQ'S & POLICIES





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