Footer Menu Accordion Issue- Prestige Theme

dreamtechzone_5 · ‎12-28-2023

Hello Everyone!

I am using the Shopify Prestige theme. 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? Please help me. Thanks in advance.

Store Url: https://dream-tech-zone.myshopify.com/

Password: Admin

Dan-From-Ryviu · ‎12-28-2023

Go Online Store > Themes > Edit code > open theme.liquid file, add this code below after <head> tag

<style>
@media (max-width: 749px){
.Footer__Block:nth-child(2) {
margin-top: 48px !important;
}
.Footer__Block {
margin-top: 8px !important;
}
.Footer__Block .Linklist {
margin-bottom: 40px;
}
.Footer__Block .mob_tab > h2 {
width: 100%;
z-index: 2;
}
.Footer__Block .mob_tab > span {
position: absolute;
right: 24px;
}
}
</style>

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

View solution in original post

Dan-From-Ryviu · ‎12-28-2023

Please update CSS code.

<style>
@media (max-width: 749px){
.Footer__Block {
margin-top: 8px !important;
}
.Footer__Block .Linklist {
margin-bottom: 40px;
}
.Footer__Block .mob_tab > h2 {
width: 100%;
z-index: 2;
}
.Footer__Block .mob_tab > span {
position: absolute;
right: 24px;
}
}
</style>

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

View solution in original post

Huptech-Web · ‎12-28-2023

Hi @dreamtechzone_5
Update the js with the below js, Currently, you are using the js that triggers the title not the arrow

var mob_tab = document.querySelectorAll(".Footer__Block.Footer__Block--links .mob_tab")
mob_tab.forEach(function(tab_click) {
    tab_click.addEventListener("click", (e) => {
        tab_click.closest(".mob_tab").classList.toggle("show");
    });
})

If you found this response helpful, please do like and accept the solution. Thanks!
Need support with Customizing your Shopify store?
Feel free to contact me at info@huptechweb.com or Visit our website Huptech Web.
Instant Shortcode Builder: Integrate customizable UI features anywhere in your store - No coding knowledge required

Dan-From-Ryviu · ‎12-28-2023

Go Online Store > Themes > Edit code > open theme.liquid file, add this code below after <head> tag

<style>
@media (max-width: 749px){
.Footer__Block:nth-child(2) {
margin-top: 48px !important;
}
.Footer__Block {
margin-top: 8px !important;
}
.Footer__Block .Linklist {
margin-bottom: 40px;
}
.Footer__Block .mob_tab > h2 {
width: 100%;
z-index: 2;
}
.Footer__Block .mob_tab > span {
position: absolute;
right: 24px;
}
}
</style>

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

dreamtechzone_5 · ‎12-28-2023

Wow Great. It worked. I appreciate it.

Follow Us menu can be kept as a dropdown and can arrow icons be reduced in size?

Dan-From-Ryviu · ‎12-28-2023

You can customize code of your theme to do that

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

dreamtechzone_5 · ‎12-28-2023

Ok. I have tried. But I can't fix it. How can I fix it?

Dan-From-Ryviu · ‎12-28-2023

You must customize HTML of Follow us the same as other

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

dreamtechzone_5 · ‎12-28-2023

When I remove Follow Us, there is a lot of space under Quick Shop.

Dan-From-Ryviu · ‎12-28-2023

Please update CSS code.

<style>
@media (max-width: 749px){
.Footer__Block {
margin-top: 8px !important;
}
.Footer__Block .Linklist {
margin-bottom: 40px;
}
.Footer__Block .mob_tab > h2 {
width: 100%;
z-index: 2;
}
.Footer__Block .mob_tab > span {
position: absolute;
right: 24px;
}
}
</style>

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

dreamtechzone_5 · ‎12-28-2023

I would like to keep the newsletter form in mobile mode as in desktop mode.
In mobile mode want to reduce the space in the marked area below.

Zoubidou75 · ‎04-07-2024

Hello Dreamtechzone,

Hope you're well, may you share your code to have the same kind of footer for mobile, like a drop drown like this please. I aslo have prestige one but didnt suceed to drop down it..

Thanks a lot !!

Best

Footer Menu Accordion Issue- Prestige Theme

Footer Menu Accordion Issue- Prestige Theme

Community Blog Articles