Optimizing footer for mobile view - Dawn theme

[Xakhil]

I want to optimize my footer menu so that it shows sections in a drop-down menu in mobile but stays in the default view in desktop.

This is how it looks in mobile

This is how it looks in desktop

I want it to look like this in mobile. Can anyone help ?

[Logan01]

Creating different layouts for different devices (or screen sizes) can be done through media queries.

Go to your theme editor and open your theme.css or base.css file.

And add the following code:

.footer-links {
display: flex;
justify-content: space-between;
}

.footer-section {
width: 30%;
}

@media only screen and (max-width: 768px) {
.footer-links {
display: flex;
flex-direction: column;
padding: 20px;
}

.footer-section {
width: 100%;
margin-bottom: 20px;
text-align: left;
}

.dropdown-content {
display: none;
padding-left: 15px;
}

.footer-section.active .dropdown-content {
display: block;
}

.footer-section h4 {
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
}

.dropdown-indicator {
margin-left: 10px;
}

.footer-section ul {
list-style-type: none;
padding: 0;
margin: 0;
}

.footer-section ul li a {
text-decoration: none;
color: inherit;
}
}

Create a new Javacsript file and add the following code:

const dropdowns = document.querySelectorAll(‘.dropdown-toggle’);

dropdowns.forEach(dropdown => {
dropdown.addEventListener(‘click’, function() {

dropdowns.forEach(otherDropdown => {
if (otherDropdown !== this) {
otherDropdown.parentElement.classList.remove(‘active’);
}
});

this.parentElement.classList.toggle(‘active’);
});
});

[nidhidhiman004]

HI @Xakhil

result :

Yes, paste the code in footer.liquid file at the very end of the file

@media (max-width: 749px) { .grid .footer-block.grid__item { margin: 0; } .grid .footer-block__heading { position: relative; margin: 0; padding: 1.5rem 0; cursor: pointer; } .grid .footer-block__heading::after { content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 20px; text-align: center; } .grid .footer-block__heading:not(.block-collapsed)::after { content: "-"; } .grid .footer-block__heading.block-collapsed + .footer-block__details-content { visibility: hidden; opacity: 0; height: 0; margin: 0; padding: 0; transition: all .2s ease-out; overflow: hidden; } .grid .footer-block__heading + .footer-block__details-content { visibility: visible; opacity: 1; height: auto; transition: all .2s ease-out; overflow: hidden; margin-bottom: 3rem; } } ​

i hope it would be defiantly works’

Thanks

---

[gr_trading]

Hi @Xakhil ,

You can convert the footer in accordion for mobile version.

Request you to refer the below video for implementation details.

Transform Footer Links into Accordion Format using custom dev | Shopify custom code

Hope this will helps..