Footer menu

[kashco]

Kashco Interiors

I am using Canyon theme. I want to make accordion footer for mobile version (collapsible) and centralize with the header being large.

Desktop version - I want the menu to look even.

password: kashco

[Dev_Inflame]

@kashco

kashco

Hi @kashco ,

Yes, it’s definitely possible; however, it will require some custom coding to implement.

Thanks

[websensepro]

Hello, @kashco

I’ve reviewed your store, and here is a complete guide with all the code you need to achieve both of your goals for your Store.

1. Go to Online Store → Theme → Edit code.
2. Open your theme.css / base.css file and paste the code in the bottom of the file.

@media screen and (min-width: 990px) {
  .footer .footer-blocks-wrapper {
    display: flex !important;
    justify-content: space-between !important;
    width: 100% !important;
    text-align: left !important;
  }
  .footer .footer-block {
    flex: 1 !important;
    margin: 0 15px !important;
  }
}

@media screen and (max-width: 767px) {
  .footer, .footer-block {
    text-align: center !important;
  }

  .footer-block__heading {
    font-size: 1.8rem !important;
    cursor: pointer !important;
    position: relative !important;
    padding-right: 25px !important; 
    border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
    padding-bottom: 15px !important;
    margin-bottom: 15px !important;
  }

  .footer-block__heading::after {
    content: '+' !important;
    font-size: 2.2rem !important;
    position: absolute !important;
    right: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    transition: transform 0.3s ease !important;
  }
  
  .footer-block.active .footer-block__heading::after {
    content: '−' !important;
  }

  .footer-block .footer-block__details-content {
    max-height: 0 !important;
    overflow: hidden !important;
    transition: max-height 0.4s ease-out !important;
  }

  .footer-block.active .footer-block__details-content {
    max-height: 300px !important;
    transition: max-height 0.5s ease-in !important;
  }
}

Save it.

1. While still in the code editor, find the Layout folder and click on the theme.liquid file.

2. Scroll down to the very bottom of the theme.liquid file, right before the closing tag.

3. Paste the following JavaScript code just above the tag:

<script>
  document.addEventListener('DOMContentLoaded', function() {
    if (window.innerWidth < 768) {
      const footerHeadings = document.querySelectorAll('.footer-block__heading');

      footerHeadings.forEach(heading => {
        heading.addEventListener('click', function() {
          const parentBlock = this.closest('.footer-block');
          
          if (parentBlock) {
            parentBlock.classList.toggle('active');
          }
        });
      });
    }
  });
</script>

Click Save and Try,

Thank You!