How do i customize my footer in Dawn Theme?

[NoBL]

I'm wanting to change my footers look, in mobile mode. To a category type theme. I pretty really much want the end result to look exactly like this one.

 

[NoBL]

My website URL is www.noblthelabel.com

The website I am referring to is https://blakelyclothing.com/

[CodeFoxer1232]

Hi @NoBL  yes i can help you with this, I am  designer and developer. 

NOTE: add this code on footer.liquid file At the bottom of section.

here is code 

<style>
@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;
}

}
</style>
<script>
window.addEventListener('DOMContentLoaded', () => {
const headings = document.querySelectorAll('.grid .footer-block__heading');

const handleCollapse = (heading) => {
const content = heading.nextElementSibling;

if (heading.classList.contains('block-collapsed')) {
heading.classList.remove('block-collapsed');
heading.setAttribute('aria-expanded', 'true');
content.style.display = 'block'; // or any other preferred display property
} else {
heading.classList.add('block-collapsed');
heading.setAttribute('aria-expanded', 'false');
content.style.display = 'none';
}
};

headings.forEach((heading, index) => {
heading.classList.add('block-collapsed');
heading.setAttribute('role', 'button');
heading.setAttribute('aria-expanded', 'false');
heading.setAttribute('tabindex', '0');

const content = heading.nextElementSibling;
content.setAttribute('id', `footer-block-index-${index}`);
heading.setAttribute('aria-controls', `footer-block-index-${index}`);

heading.addEventListener('click', () => {
handleCollapse(heading);
});

heading.addEventListener('keydown', (event) => {
if (event.key === 'Enter' || event.key === ' ') {
handleCollapse(heading);
}
});
});
});
</script>

Thanks And Regards

[NoBL]

Tried this code, this also did not work.

[CodeFoxer1232]

Hi @NoBL 

I hope you doing well, So so I already try this code on my testing store in dawn theme and it will work perfectly. I think You should have add title for your menus like, Quick links or footer menu.

Thanks And Regards

[Made4uo-Ribe]

Hi @NoBL 

To achieve a dropdown style, you need to add collapsible content to the footer. If this feature is not available in your theme, you will need a developer to install it. In the meantime, I have rearranged your footer on the mobile screen to match the sample website you provided, but without the collapsible feature.

From you Admin page, go to Online Store > Themes

Select the theme you want to edit

Under the Asset folder, open the main.css(base.css, style.css or theme.css)

Then place the code below at the very bottom of the file.

@media only screen and (max-width: 749px){
.footer__content-top.page-width {
    display: flex;
    flex-direction: column;
    padding-bottom: 0;
}
.footer-block--newsletter {
    align-self: center;
}
.footer__content-bottom {
    border-top: 0;
}
}

And Save. 

Result:

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[NoBL]

Thank you for this! I will try this out tomorrow when I am on my computer. 

Is it possible to have the text center of the screen? So that it is not on the left side?

[NoBL]

Hello @Made4uo-Ribe I copied and pasted the code into my base.css although no changes were made.

[Made4uo-Ribe]

I'm sorry, I didn't provide a perfect solution since adding collapsible content in the footer requires a developer.

Alternatively, we can explore a free option.

The code I provided only adjusts the footer without the collapsible content.

Please check if this works with your theme.

https://community.shopify.com/c/shopify-design/dawn-theme-accordion-collapsible-footer/m-p/1647667 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!