Solved

Move Email signup in the footer menu

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
5548 1332 1644

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!

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


View solution in original post

Replies 9 (9)

Made4uo-Ribe
Shopify Partner
5548 1332 1644

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!

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


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
5548 1332 1644

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!

 

 

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


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
5548 1332 1644

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.
Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


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. 

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
5548 1332 1644

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!

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com