Dawn Theme: Adjust Footer Menu, quick links and newsletter

blueberryhutch
Excursionist
11 0 5

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

Screen Shot 2021-10-13 at 18.18.44.png

Replies 30 (30)
KetanKumar
Shopify Partner
32471 3258 10832

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

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
KetanKumar
Shopify Partner
32471 3258 10832

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

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
blueberryhutch
Excursionist
11 0 5

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
Excursionist
20 0 8

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
Shopify Partner
32471 3258 10832

@blueberryhutch 

give me issue images?

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
KetanKumar
Shopify Partner
32471 3258 10832

@Intulani 

store url and issue images?

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Intulani
Excursionist
20 0 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

blueberryhutch
Excursionist
11 0 5

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

footer.png

thanks

blueberryhutch
Excursionist
11 0 5

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

blueberryhutch
Excursionist
11 0 5
KetanKumar
Shopify Partner
32471 3258 10832

@blueberryhutch @Intulani 

yes please give me store url here

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Zworthkey
Shopify Partner
5581 641 1500

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

If helpful, please Like and Accept Solution. Hire Us |
if you Want to modify or Customize your theme | Whatsapp | Email us: sales@zworthkey.com
Top Rated Shopify Agency, | We have Over 200+ Happy merchants.
Build Successful Shopify Stores with GemPages
Intulani
Excursionist
20 0 8

the url is shophomwala.com. password is nowshi 

@KetanKumar @Zworthkey 

Thank you for the assistance

Intulani
Excursionist
20 0 8

I have removed the password page. 

KetanKumar
Shopify Partner
32471 3258 10832

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

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Zworthkey
Shopify Partner
5581 641 1500

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.

If helpful, please Like and Accept Solution. Hire Us |
if you Want to modify or Customize your theme | Whatsapp | Email us: sales@zworthkey.com
Top Rated Shopify Agency, | We have Over 200+ Happy merchants.
Build Successful Shopify Stores with GemPages
Intulani
Excursionist
20 0 8

Thank you so much it worked!

Intulani
Excursionist
20 0 8

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

Zworthkey
Shopify Partner
5581 641 1500

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

If helpful, please Like and Accept Solution. Hire Us |
if you Want to modify or Customize your theme | Whatsapp | Email us: sales@zworthkey.com
Top Rated Shopify Agency, | We have Over 200+ Happy merchants.
Build Successful Shopify Stores with GemPages