How can I rearrange the footer menu and email signup on my website?

[birdhavencreate]

Hi Team,

https://birdhavencreations.com/ 

I have three queries -

1. I am trying to move the "Email Signup" form to the same level as other Footer Menu instead of showing the default bottom of the Quicklinks

2. I want the Social Media Icons to be right below Email Signup so that overall Footer menu looks clean. 

3. The current "SUPPORT" and "ABOUT" footer menu doesn't  look hortizontally spaced compared to the first text box. How to move these two columns to slightly right ?

[Made4uo-Ribe · Accepted solution]

Hi @birdhavencreate 

It is like this?

If its, try this one. 

• From your Shopify admin dashboard, click on "Online Store" and then "Themes".
• Find the theme that you want to edit and click on "Actions" and then "Edit code".
• In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

.footer-block--newsletter.scroll-trigger.animate--slide-in {
    flex-direction: column;
    margin-top: 0px;
    width: 35%;
}

.footer-block__newsletter {
    margin-left: auto;
    margin-right: 0px !important;
}

ul.footer__list-social.list-unstyled.list-social {
    align-self: flex-start;
    margin-bottom: 50px;
}                                              
.footer__content-top.page-width {
    display: flex;
}
.footer-block__newsletter {
    width: max-content;
}


.footer__blocks-wrapper.grid.grid--1-col.grid--2-col.grid--4-col-tablet.scroll-trigger.animate--slide-in {
    gap: 66px;
}

• And Save. 

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

[birdhavencreate]

Nice. This works. Just a small follow-on request

Can I have 5 lines in the first column by increasing the column width, then the second and third columns can have slightly lower column width? 

[birdhavencreate]

@Made4uo-Ribe I just noticed that your solution works for Desktop but gets distorted badly on mobile. I want it to be the original configuration in mobile where each of the columns is stacked below the other

[Made4uo-Ribe]

Yes, cause that is only for desktop view. To prevent this code showing on mobile add this one. 

Same Instruction:

@media only screen and (min-width:749px){
.footer-block--newsletter.scroll-trigger.animate--slide-in {
    flex-direction: column;
    margin-top: 0px;
    width: 35%;
}

.footer-block__newsletter {
    margin-left: auto;
    margin-right: 0px !important;
}

ul.footer__list-social.list-unstyled.list-social {
    align-self: flex-start;
    margin-bottom: 50px;
}                                              
.footer__content-top.page-width {
    display: flex;
}
.footer-block__newsletter {
    width: max-content;
}


.footer__blocks-wrapper.grid.grid--1-col.grid--2-col.grid--4-col-tablet.scroll-trigger.animate--slide-in {
    gap: 66px;
}
}

And Save. 

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

[nadylina]

Hello there
I have inserted this code to my Crave theme and it worked. Thanks so much!
The only problem I would have right now is that the Social Media Icons are not right below Email Signup. Also would it be any way to extend the first column I have in the footer so the content can fit better?
If possible, I can leave here my website so you can have an idea of what I was meaning.
www.winningnaturals.com
Thanks so much
Nadylina

[Made4uo-Ribe]

Welcome, Good to know it help in your store. 

Do you mean like this?

If it is try this one. 

• From your Shopify admin dashboard, click on "Online Store" and then "Themes".
• Find the theme that you want to edit and click on "Actions" and then "Edit code".
• In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

.footer__content-top.page-width {
    justify-content: space-between;
}
@media only screen and (min-width: 749px){
ul.footer__list-social.list-unstyled.list-social {
    align-self: end;
}
.footer-block--newsletter {
    justify-content: flex-start;
}
.footer-block__newsletter {
    flex-grow: unset;
}
}

• And Save.

[nadylina]

Thanks so much, appreciate your help.
Unfortunately it didn't work at all, I replaced your code with the old one (you suggested before) and nothing changed at all. The Social Media Icons were not below Email Signup and the column for quick links which I would like to extend so the links can fit in one row,  didn't change at all. 

[CPK1989]

This worked perfectly for me thank you! My only question is - is there anyway on mobile, for the email capture to show ABOVE the other menu links? So on desktop it's beside them (which is great), but on mobile, the links are displayed first and the email capture is last. Any help much appreciated! 

[Made4uo-Ribe]

Can I take a look in your store? I'll just want to check if we can change it. Thanks!

[CPK1989]

Of course, but as we're launching soon, it's private at the moment - are
you ok to work with a screengrab? We're using the free theme 'Refresh'.


[image: Screenshot 2024-05-06 at 16.02.11.png]

[Made4uo-Ribe]

Oh, sorry. For checking the code in store the Image wont help us. Reading the code would help to understand how can I exchange or change the position. You can on drop message on my mail box Thanks!

[CPK1989]

No probs - here's the link (https://597ed6-6.myshopify.com/) and I'll PM you the password. Happy for you to post solution on here in case anyone else has the same query! Thanks!

[CPK1989]

I literally can't PM you - not sure why! I've tried several times. Never mind anyway, someone will probably post the solution somewhere.

[Made4uo-Ribe]

Thanks for the info, I did this. 

Check this code. 

From your Shopify admin dashboard, click on "Online Store" and then "Themes".

Find the theme that you want to edit and click on "Actions" and then "Edit code".

In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

@media only screen and (max-width: 749px){
.footer__content-top.page-width {
    display: flex;
    flex-direction: column-reverse;
    gap: 25px;
}
}

And save. 

Q: Do you like to align the newsletter to the center? or you like the links also in the center? 

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

[CPK1989]

You're a star! That works brilliantly. The alignment you've used looks good, but if I did want to align the links in the centre or email capture to the right, is there a straightforward code tweak for that?

[Made4uo-Ribe]

If you like to add some buttons on to shown on the customize theme. That needs a schema and need to edit some code in the liqud. 

I went to check it again cause i didnt check to align from the code. But it giving me wrong password. 

[Sbaizer]

Hi @Made4uo-Ribe, I tried using this code for my store and it worked for desktop view.  However in mobile view, the newsletter box is too large and cut off at the right and the social media icons are too far below the newsletter.  Is there a way to modify the code you provided so it looks the same in desktop and mobile? 

[Made4uo-Ribe]

It would not be the same result cause the design is not for your store, you may have different codes. And store design would you mind to share your store  URL? Thanks!