Add accordion menu / drop downs to Flow Theme footer

[Stephanosp]

Hi,

Could somebody please help me to add an accordion menu / drop down menu to my footer. Im using the Flow theme. Currently the footer menu looks like the first picture below.

 

I would like all four menus in the footer to be dropdowns similar to the one shown in my main menu in the second and third pictures below, with an arrow next to each header on the far right side that when clicked opens and closes the sublist of menu items.

 

 

Thank you.

[Fitfusiongear]

Hi there!

I’d be happy to help you add an accordion or dropdown menu to your footer in the Flow theme. It involves some customization to the code, and I'd suggest a few steps to get started.

I can guide you through setting up the right structure for your footer menu and adding the necessary styles and functionality to create the accordion effect. Since this involves editing the theme’s liquid files, JavaScript, and possibly custom CSS, it's best done directly in the theme code.

If you’d like, I can walk you through the process step-by-step or assist you in making the changes.

Feel free to get in touch, and we can schedule a time to dive into the specifics

[Stephanosp]

Hi, yes please if you could that would be great. I'm able to follow your instructions in terms of pasting coding into my theme files.

[Stephanosp]

Hi, yes that would be great, I'm ready to get started.

[Benedict001]

Hi there! I'd be happy to help you add dropdown menus to your footer in the Flow theme.

Here’s how you can achieve a similar accordion effect with arrows in your footer:

1. **HTML Structure**: Ensure each footer section has a header (`<h4>`) and a list (`<ul>` for links), structured like this:

```html
<div class="footer-menu">
<h4 class="footer-header">Menu Title <span class="arrow">▼</span></h4>
<ul class="footer-sublist">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<!-- more links -->
</ul>
</div>
```

2. **CSS Styling**: Add CSS to style the dropdown and arrow.

```css
.footer-sublist {
display: none; /* Initially hide the sublist */
transition: max-height 0.3s ease; /* Smooth expand/collapse */
}
.footer-header {
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
}
.footer-header .arrow {
transition: transform 0.3s;
}
.footer-header.open .arrow {
transform: rotate(180deg); /* Rotates the arrow when open */
}
```

3. **JavaScript for Accordion Effect**: Use JavaScript to toggle the visibility of each submenu and rotate the arrow.

```javascript
document.querySelectorAll('.footer-header').forEach(header => {
header.addEventListener('click', () => {
header.classList.toggle('open');
let submenu = header.nextElementSibling;
submenu.style.display = submenu.style.display === 'block' ? 'none' : 'block';
});
});
```

This should give you a functional accordion menu in your footer. Let me know if you need more help with this!

[namphan]

Hi @Stephanosp,

Can I send you a collaborator invite? it will help me check things and add them

[Stephanosp]

Hi, yes please send me one over.

[namphan]

Hi @Stephanosp,

Please send me the store link and collaborator code in a private message, I will send you an invitation and check it out.

[Stephanosp]

Great, I've sent that now.