What's your biggest current challenge? Have your say in Community Polls along the right column.

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

Solved

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

birdhavencreate
Tourist
3 0 2

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 ?

Accepted Solution (1)

Made4uo-Ribe
Shopify Partner
9146 2183 2698

This is an accepted solution.

Hi @birdhavencreate 

It is like this?

Made4uoRibe_0-1694014884175.png

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!

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.

View solution in original post

Replies 18 (18)

Made4uo-Ribe
Shopify Partner
9146 2183 2698

This is an accepted solution.

Hi @birdhavencreate 

It is like this?

Made4uoRibe_0-1694014884175.png

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!

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.
birdhavencreate
Tourist
3 0 2

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
Tourist
3 0 2

@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

 

birdhavencreate_1-1694544266505.png

 

Made4uo-Ribe
Shopify Partner
9146 2183 2698

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!

 

 

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.
nadylina
Tourist
6 0 2

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
Shopify Partner
9146 2183 2698

Welcome, Good to know it help in your store. 

Do you mean like this?

Made4uoRibe_0-1698264759369.png

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.
If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.
nadylina
Tourist
6 0 2

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
Tourist
6 0 0

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
Shopify Partner
9146 2183 2698

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

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.
CPK1989
Tourist
6 0 0
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
Shopify Partner
9146 2183 2698

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!

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.
CPK1989
Tourist
6 0 0

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
Tourist
6 0 0

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
Shopify Partner
9146 2183 2698

Thanks for the info, I did this. 

Made4uoRibe_0-1715010781018.png

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!

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.
CPK1989
Tourist
6 0 0

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
Shopify Partner
9146 2183 2698

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. 

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.
Sbaizer
Tourist
5 1 2

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? 

Sbaizer_0-1701894012406.png

 

 

Made4uo-Ribe
Shopify Partner
9146 2183 2698

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!

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.