Solved

Footer Menu Accordion Issue- Prestige Theme

dreamtechzone_5
Shopify Partner
284 1 34

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

Screenshot 2023-12-28 133317.png

 

Accepted Solutions (2)

Dan-From-Ryviu
Shopify Partner
7892 1533 1562

This is an accepted solution.

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 and Accept solution or ❤Donate❤
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Dan-From-Ryviu
Shopify Partner
7892 1533 1562

This is an accepted solution.

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 and Accept solution or ❤Donate❤
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Replies 10 (10)

Rishihuptech
Shopify Partner
589 105 119

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
Shopify Partner
7892 1533 1562

This is an accepted solution.

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 and Accept solution or ❤Donate❤
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

dreamtechzone_5
Shopify Partner
284 1 34

Wow Great. It worked. I appreciate it. 

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

412089472_290610743523129_1356549811952908135_n.jpg

Dan-From-Ryviu
Shopify Partner
7892 1533 1562

You can customize code of your theme to do that

- Helpful? Like and Accept solution or ❤Donate❤
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

dreamtechzone_5
Shopify Partner
284 1 34

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

Dan-From-Ryviu
Shopify Partner
7892 1533 1562

You must customize HTML of Follow us the same as otherScreenshot 2023-12-28 at 15.42.21.png

Screenshot 2023-12-28 at 15.42.11.png

- Helpful? Like and Accept solution or ❤Donate❤
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

dreamtechzone_5
Shopify Partner
284 1 34

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

Screenshot 2023-12-28 154315.pngScreenshot 2023-12-28 154234.png

Dan-From-Ryviu
Shopify Partner
7892 1533 1562

This is an accepted solution.

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 and Accept solution or ❤Donate❤
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

dreamtechzone_5
Shopify Partner
284 1 34

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.

 

Screenshot 2023-12-28 173142.png

Zoubidou75
Excursionist
54 0 5

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