Dawn Theme: Adjust Footer Menu, quick links and newsletter

[blueberryhutch]

Hello all,

How can I adjust the layout and arrangement of the footer menu from dawn theme?

I'd like to split the items below Navigation in two columns, like this:

Suchen                   Versand & Rückversand          

Kontakt                   Rückgaberecht

Impressum             AGB & Wiederrufsbelehrung

Datenschutz

And then I'd like to have the newsletter sign up box to move up and be right the right text box and aligned vertically. also the email button should be aligned vertical with the header text

Many thanks for your help. 🙂 

[KetanKumar]

@blueberryhutch 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!😊
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

[KetanKumar]

@blueberryhutch 

can you please try this code

1. Go to Online Store->Theme->Edit code
2. Asset->/section-footer.css->paste below code at the bottom of the file.

@media screen and (min-width: 750px) {
ul.footer-block__details-content.list-unstyled {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
}

[blueberryhutch]

many thanks Ketan. the navigation items have now changed but the newsletter part is still at the wrong place.

The header ("Erfahre alles...") should move up and vertically aligned below the "für dich da.." part and also the email button should move up and be vertically aligned (see file attached).

thx,

[Intulani]

Hello @KetanKumar. I am trying to do this but on mobile view for the dawn 2.0 theme. I want to split my footer into 2 columns. I'll appreciate the help. Thanks

[KetanKumar]

@blueberryhutch 

give me issue images?

[KetanKumar]

@Intulani 

store url and issue images?

[Intulani]

 That is what the footer looks like. I am trying to make it two columns for mobile view. I am using the dawn 2.0 theme. Thank you @KetanKumar 

[blueberryhutch]

hi ketan, I thought I've already submitted the screenshot but here again:

thanks

[blueberryhutch]

@KetanKumar  in addition, Im also interested in having 2 columns in mobile view if possible... thanks

[blueberryhutch]

@KetanKumar  any update on this?

thx

[KetanKumar]

@blueberryhutch @Intulani 

yes please give me store url here

[Zworthkey]

Hii, @Intulani 
Kindly share your store URL so,

@media screen and (max-width: 749px) {
.footer-block__details-content {
display: grid !important;
    grid-template-columns: 1fr 1fr;
}
}

Add this code in theme.scss or style.css

[Intulani]

the url is shophomwala.com. password is nowshi 

@KetanKumar @Zworthkey 

Thank you for the assistance

[Intulani]

I have removed the password page. 

[KetanKumar]

@Intulani 

yes please try this code

1. Go to Online Store->Theme->Edit code
2. Asset->/base.css->paste below code at the bottom of the file.

@media screen and (max-width: 749px) {
.footer-block__details-content {
display: grid;
    grid-template-columns: 1fr 1fr;
}
}

[Zworthkey]

Hii, @Intulani 
Paste this code in the section-footer.css file or theme.scss file.

@media screen and (max-width: 749px){
.footer-block.grid__item {
    width: 50% !important;
}
.footer-block.grid__item.footer-block--menu {
    display: inline-block !important;
}
.footer-block.grid__item.footer-block--menu:last-child {
    position: relative !important;
    top: -90px !important;
}


}

Thank You.

[Intulani]

Thank you so much it worked!

[Intulani]

@Zworthkey @KetanKumar How can I reduce the footer height and make it more smaller on mobile view? Especially the bottom part

[Zworthkey]

@Intulani 
Paste this code on top of the section-footer.scss file.

@media screen and (max-width: 749px){
.footer__content-top.page-width {
    height: 287px !important;
}
}

Thank You.