Footer customization

Store Design
, , ,
1

HI,

my website - www.kulaindia.com

I’m using shopify Horizon theme.

I’m looking at creating a collapsible menu for my footer only for mobile view. I’ve attached reference images of my website and a reference image of how I want it to look. I need 3 headers “Legal & Compliances” - for policies, “Contact & Info” - Contact us information and “KULA” - for quick links can someone please help me out.

also, on the desktop version..on hover over the footer elements i want a underline animation. can someone help me with that as well.

IMG_6777.PNG
IMG_6777.PNG1206×2622 227 KB

IMG_6782
IMG_67821206×2622 294 KB

4

hey @SNAP_SHOT try this one by follow these following steps
Go to online store ----> themes ----> go to three Dots ----> edit code ---->find theme.liquid files ----> place the code ---->before the </body>tag

<style>
@media screen and (max-width: 767px) {
.section.section--page-width.color-scheme-7250badc-5a94-471e-ad25-8cd96fc5537d {
    position: relative;
    margin-top: 2rem !important;
    gap: 0px !important;
}
.footer-content {
    gap: 0px !important;
    padding-top: 3rem !important;
}
jumbo-text.jumbo-text-visible.ready {
    position: fixed !important;
}
}
</style>

image
image289×510 38 KB

i’m try as much as similar to your refence image
if this code is work don’t forget to like and also mark it solution
best
MUSTUFA

5

How can i get the white seperator lines between each..like in the reference