Dawn Theme: Move Social Media Icons in Footer and Add Lower Menu

[diva35]

Hello everyone!

I have dug deep and have changed the footer of the dawn theme to reflect the newsletter in a column, I am wanting to add the social media icons directly under the Newsletter.

I also want to add an additional menu to the lower area where the social media icons were.

Here is what my footer currently looks like:

and I created a mockup of what I want it to look like with the changes I mentioned:

I would greatly appreciate your help in solving this issue for me! Cheers!

[GemPages]

Hello @diva35 

It's GemPages support team and glad to support you today.

You can follow these steps:

1. Go to Online Store -> Theme -> Edit code
2. Open your theme.liquid theme file
3. Paste below code before </body> :

<style>
   .list-social{
      max-width: 36rem;
      margin: 0 auto;
      justify-content: flex-start
   }
</style>

If you require any further information, feel free to contact me.
Best regards,
GemPages Support Team

[Dan-From-Ryviu]

Add this code at the bottom of your base.css file

.list-social { justify-content: center !important; } 

Then it will look like this image 

[diva35]

I'm hoping to make all 4 columns equal width and the newsletter title and social icons justified to the left like the other columns.

Right now, my code for the newsletter section is:

@media screen and (min-width: 768px) {
.footer-block--newsletter {
width: 50%;
margin: 0 !important;
align-items: flex-start !important;
}
.footer__blocks-wrapper.grid.grid--1-col.grid--2-col.grid--4-col-tablet {
width: 50%;}
.footer__content-top.page-width {
display: flex;
flex-wrap: wrap;
}
}

[GemPages · Accepted solution]

You can modify the above code as follows:

@media screen and (min-width: 768px) {
   .footer-block--newsletter {
      width: 25%;
      margin: 0 !important;
      align-items: flex-start !important;
   }
   .footer__blocks-wrapper.grid.grid--1-col.grid--2-col.grid--4-col-tablet {
      width: 75%;
   }
   .footer__content-top.page-width {
      display: flex;
      flex-wrap: wrap;
   }
   .list-social{
      justify-content: flex-start;
   }
}

If you require any further information, feel free to contact me.
Best regards,
GemPages Support Team

[diva35]

Hi! This code worked and made my footer look stellar on desktop, but i just noticed that when I toggled to mobile the help menu is not stacking under the logo. How can I fix this? Also, is it possible to center all of the menu items on mobile?

[GemPages]

Hello @diva35 

You can try the following code to edit the layout on mobile:

@media screen and (max-width: 750px) {
   .footer-block.grid__item{
      width: 100%;
   }
}

If you require any further information, feel free to contact me.
Best regards,
GemPages Support Team

[PageFly-Victor]

Hi @diva35 

This is Victor from PageFly - Landing Page Builder App.

You can try this code by following these steps:
Go to Online store => themes => actions => edit code  and add this code on file base.css

.list-social{

      max-width: 36rem;

      margin: 0 auto;

      justify-content: flex-start !important;

   }

Hope this answer helps.
Best regards,
Victor | PageFly