Accordian Style for footer navigation - prestige theme

Store Design
1

I would like assistance in editing my code so my footer navigation appears in accordian style when being used on mobile only. I use the Prestige theme.

Thanks in advance.

2

  1. Locate the JavaScript file responsible for handling the mobile navigation. It’s typically named theme.js or theme.min.js. Open the file for editing.

  2. Search for the code that handles the mobile menu functionality. Look for a function that is triggered when the mobile menu button is clicked or when the mobile breakpoint is reached. It could be something like toggleMobileMenu() or similar.

  3. Within that function, find the code that toggles the visibility of the mobile menu. It might use classes like is-open or visible to show and hide the mobile menu.

  4. Below the code that toggles the mobile menu, add the following code to handle the accordion behavior for the footer navigation:

// Add accordion behavior to footer navigation on mobile
$('.footer-nav__title').on('click', function() {
  $(this).toggleClass('active').next('.footer-nav__list').slideToggle();
});

Wrap the navigation links within the accordion structure. Replace the code responsible for rendering the navigation links with the following code:

{% for link in linklists[settings.footer_menu].links %}
  
    
{{ link.title }}

    
      {% for childlink in link.links %}
        - {{ childlink.title }}
        
      {% endfor %}
    

  

{% endfor %}
3

Thanks - I really have no idea how to do this :neutral_face: