Dawn Theme: Adjust Footer Menu, quick links and newsletter

Store Design
1

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. :slightly_smiling_face:

Screen Shot 2021-10-13 at 18.18.44.png
Screen Shot 2021-10-13 at 18.18.44.png1241×466 14.7 KB

2 Likes
2

@blueberryhutch

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

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

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

3

@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;
}
}
2 Likes
4

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,

1 Like
5

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

2 Likes
6

@blueberryhutch

give me issue images?

7

@Intulani

store url and issue images?

1 Like
8

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

IMG_0867.jpg
IMG_0867.jpg1242×2075 59.2 KB

9

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

footer.png
footer.png1416×452 15.6 KB

thanks

10

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

11

@KetanKumar any update on this?

thx

1 Like
12

@blueberryhutch @Intulani

yes please give me store url here

13

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

1 Like
14

the url is shophomwala.com. password is nowshi

@KetanKumar @Zworthkey

Thank you for the assistance

1 Like
15

I have removed the password page.

16

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

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.

2 Likes
18

Thank you so much it worked!

1 Like
19

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

20

@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.

2 Likes