How to make Collapsible Footer Menus on Mobile (Dawn Theme)

[KC14]

Hello everyone,

I would like to make my Footer Menus collapsible on Mobile view only! (see screenshots below)

I am using Dawn Theme by the way.

Help would be appreciated 🙂

Thank you!

How it's looking right now

How I want it to look like

[KetanKumar]

@KC14 

oh sorry for that issue yes its possible to change code If you're comfortable working with coding languages (eg. HTML, JavaScript, CSS, and Liquid), then you can try to follow the custom coding provided by

https://codepen.io/EricPorter/pen/EKqYpj or Send DM

[KC14]

@made4Uo @KetanKumar @LitCommerce @oscprofessional @ZestardTech 

Anyone who knows how to fix this?

All help would be appreciated 🙂

Thank you!

[myKidsLounge]

@made4Uo @KetanKumar @LitCommerce @oscprofessional @ZestardTech 

Hi there, 

where does the code need to be placed.

I am using the DAWN Theme 2.5.0 and 6.0.2 

Looking forward to your feedback. 

Best regards, 

Daniel 

[KetanKumar]

@myKidsLounge 

Go to Edit code >>>> Section >>> Footer code 

[Guleria]

Hello,

Follow these steps:

1. Go to Online Store -> Theme -> Edit code

2. Open your section -> footer.liquid file and paste the following code at the bottom:

<style>
  @media screen and (max-width: 767px) {
    .footer-block.grid__item{
      margin: 0;
    }
  .footer-block__details-content{
    display: none;
  }
  .footer-block__heading {
    border-bottom: solid 1px #ddd; 
    padding-bottom: 6px;
   }
   .footer-block.grid__item .footer-block__heading::after {
      content: "+";
      position: absolute;
      right: 12%;
      font-weight: bold;
  }
  .footer-block.grid__item .footer-block__heading.active::after{
      content: "-" !important;
    }
  }
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
  // Select all elements with the class footer-block__heading
  const headings = document.querySelectorAll('.footer-block__heading');
  
  // Add click event listener to each heading
  headings.forEach(function(heading) {
    heading.addEventListener('click', function() {
      // Hide all elements with the class footer-block__details-content
      const allDetails = document.querySelectorAll('.footer-block__details-content');
      const allHeadings = document.querySelectorAll('.footer-block__heading');
      allDetails.forEach(function(detail) {
        detail.style.display = 'none';
      });
      
      // Remove active class from all headings
      allHeadings.forEach(function(h) {
        h.classList.remove('active');
      });
      
      // Toggle visibility of the corresponding footer-block__details-content
      const detailsContent = heading.nextElementSibling;
      if (detailsContent && detailsContent.classList.contains('footer-block__details-content')) {
        if (heading.classList.contains('active')) {
          // If the heading is already active, hide the details content
          detailsContent.style.display = 'none';
          heading.classList.remove('active');
        } else {
          // If the heading is not active, show the details content and add active class
          detailsContent.style.display = 'block';
          heading.classList.add('active');
        }
      }
    });
  });
});

</script>

Note:  I'm using Dawn theme version 15.0.0 if you are using a different version and code is not working for you please adjust code accordingly.

Thanks

[StefanTroffello]

Hello again, I updated @Guleria's code,
- now the menu if you press the menu it can also close
- and it stays open till closed by the user

Follow these steps:

1. Go to Online Store -> Theme -> Edit code

2. Open your section -> footer.liquid file and paste the following code at the bottom:

<style>
  @media screen and (max-width: 767px) {
    .footer-block.grid__item {
      margin: 0;
    }
    .footer-block__details-content {
      display: none;
    }
    .footer-block__heading {
      border-bottom: solid 1px #ddd;
      padding-bottom: 6px;
      position: relative; /* Ensure that the pseudo-element is positioned correctly */
    }
    .footer-block.grid__item .footer-block__heading::after {
      content: "+";
      position: absolute;
      right: 12%;
      font-weight: bold;
    }
    .footer-block.grid__item .footer-block__heading.active::after {
      content: "-" !important;
    }
  }
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
  // Select all elements with the class footer-block__heading
  const headings = document.querySelectorAll('.footer-block__heading');

  // Add click event listener to each heading
  headings.forEach(function(heading) {
    heading.addEventListener('click', function() {
      // Toggle visibility of the corresponding footer-block__details-content
      const detailsContent = heading.nextElementSibling;
      if (detailsContent && detailsContent.classList.contains('footer-block__details-content')) {
        if (heading.classList.contains('active')) {
          // If the heading is already active, hide the details content
          detailsContent.style.display = 'none';
          heading.classList.remove('active');
        } else {
          // If the heading is not active, show the details content and add active class
          detailsContent.style.display = 'block';
          heading.classList.add('active');
        }
      }
    });
  });
});
</script>

Dawn theme version 15.0.0
!Thanks to @Guleria.

[bidiman]

Thank you so much,

it works like a charm, I really wanted it!

you made my day.