How to make the footer menu not collapsible

[Cherrysm2]

I would like to modify my footer menu only for mobile version, pls see below:

1) disable collapsible for the footer menu, keep it open

2) remove the menu title

3) also remove the plus button next to the menu title

3) remove the divider line between menu, only keep one divider above the store logo

My Store:

Any help would be appreciated, Thankyou

[topnewyork · Accepted solution]

Hi @Cherrysm2,

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before </head>

<style>
/* Hide menu titles on mobile */
@media (max-width: 991px) {
    .footer__section-head h5.d-lg-none {
        display: none !important;
    }
}

/* Hide plus buttons on mobile */
@media (max-width: 991px) {
    .footer__section-btn.d-lg-none {
        display: none !important;
    }
}

/* Ensure footer menu content is always visible on mobile */
@media (max-width: 991px) {
    .footer__section-content {
        display: block !important;
    }
}

/* Hide divider lines between menus on mobile, keep only the one above the store logo */
@media (max-width: 991px) {
    .footer__border.d-lg-none {
        display: none !important;
    }
    .footer__border-top.d-lg-none {
        display: block !important; /* Keep the divider above the store logo */
    }
}
</style>

<script>
// Disable accordion functionality on mobile
document.addEventListener('DOMContentLoaded', function() {
    if (window.innerWidth <= 991) {
        // Select all accordion buttons
        const accordionButtons = document.querySelectorAll('.footer__section-head[data-js-accordion-button]');
        
        accordionButtons.forEach(button => {
            // Remove accordion button functionality
            button.removeAttribute('data-js-accordion-button');
            button.classList.remove('open');
            
            // Ensure the content is always visible
            const content = button.nextElementSibling;
            if (content && content.hasAttribute('data-js-accordion-content')) {
                content.removeAttribute('data-js-accordion-content');
                content.style.display = 'block';
            }
            
            // Remove the accordion attribute from the section
            const section = button.closest('.footer__section');
            if (section) {
                section.removeAttribute('data-js-accordion');
            }
        });
    }
});
</script>

 Thanks!