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

Re: How to change placement of footer menu & email sign up

Solved

How to change placement of footer menu & email sign up

lyna123
Tourist
11 0 1

Hi how do i make this (black) footer menu as the second picture (white footer)?

even the social media icons are bad distributed

Screenshot 2024-05-10 at 13.48.19.pngScreenshot 2024-05-10 at 13.48.36.png

Accepted Solution (1)
Made4uo-Ribe
Shopify Partner
9145 2183 2696

This is an accepted solution.

Hi @lyna123 

Im sorry i didnt notice the notification to this post. Thanks for the info,

I just like to clarify from footer black to footer white right? As image youve provided? 

Only the alignment oyu like to change or also the background color? 

Check this one. 

 

@media only screen and (min-width: 749px){
.footer__content-top.page-width {
    display: flex;
    flex-direction: row-reverse;  
    column-gap: 5% !important;
}
.footer-block--newsletter {
    flex-direction: column;
    flex-wrap: wrap;
    width: 20%;
     margin-top: 0px;
}
ul.list-unstyled.list-social.footer__list-social, .footer__follow-on-shop {
    align-self: flex-start;
}

.footer-block .grid--4-col-tablet .grid__item {
        width: 20%;
    }

.footer__blocks-wrapper.grid.grid--1-col.grid--2-col.grid--4-col-tablet {
    flex-grow: 2;
}

.footer__follow-on-shop:not(:first-child):not(:last-child) {
        text-align: left !important;
    }
}

 

And Save. 

Result:

Made4uoRibe_0-1716556150150.png

 

 

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 15 (15)

HDL-Shin
Shopify Partner
80 21 16

Hi @lyna123Can you kindly share your store link (with the password, if any) with us? I will check it and suggest you a solution if possible.

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.
♥️♥️♥️ HDL-Shin || Shopify Partner ♥️♥️♥️
lyna123
Tourist
11 0 1
HDL-Shin
Shopify Partner
80 21 16

Hi @lyna123

You can try this code by following these steps:
Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

HDLShin_0-1715346786431.png

Step 2: Search file base.css, theme.css or styles.css

HDLShin_1-1715346818103.png

Step 3: Insert the below code at the bottom of the file -> Save

 

footer.footer {
    background-color: #ffff !important;
}

.footer li.list-social__item a {
    color: black!important;
}

.footer a.link.link--text.list-menu__item.list-menu__item--link {
    color: black!important;
}

.footer .caption-large.text-body {
    color: black;
}

 

Final Result: 

HDLShin_2-1715346894725.png

Hope this can help you 
Kind regard, 
HDL-Shin

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.
♥️♥️♥️ HDL-Shin || Shopify Partner ♥️♥️♥️
lyna123
Tourist
11 0 1

Thanks for your time and answer, but I don't want to make it white, my problem is that i want my actual footer (in black picture) to be as the other footer, not in terms of color, in terms of moving the email box next to the "costumer care" menu just as in the "white footer photo".

 

Also move the social media icons just as the second picture, tittle of problem is: 

How to change placement of footer menu & email sign up
lyna123
Tourist
11 0 1

I please, could you help me solve this?..

Made4uo-Ribe
Shopify Partner
9145 2183 2696

Hi @lyna123 

Can I take a look, woud you mind to share your store URL? Let see if we can re arrange theme. 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 ⚙️.
lyna123
Tourist
11 0 1
Made4uo-Ribe
Shopify Partner
9145 2183 2696

This is an accepted solution.

Hi @lyna123 

Im sorry i didnt notice the notification to this post. Thanks for the info,

I just like to clarify from footer black to footer white right? As image youve provided? 

Only the alignment oyu like to change or also the background color? 

Check this one. 

 

@media only screen and (min-width: 749px){
.footer__content-top.page-width {
    display: flex;
    flex-direction: row-reverse;  
    column-gap: 5% !important;
}
.footer-block--newsletter {
    flex-direction: column;
    flex-wrap: wrap;
    width: 20%;
     margin-top: 0px;
}
ul.list-unstyled.list-social.footer__list-social, .footer__follow-on-shop {
    align-self: flex-start;
}

.footer-block .grid--4-col-tablet .grid__item {
        width: 20%;
    }

.footer__blocks-wrapper.grid.grid--1-col.grid--2-col.grid--4-col-tablet {
    flex-grow: 2;
}

.footer__follow-on-shop:not(:first-child):not(:last-child) {
        text-align: left !important;
    }
}

 

And Save. 

Result:

Made4uoRibe_0-1716556150150.png

 

 

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 ⚙️.
lyna123
Tourist
11 0 1

Thank you sooo much !! this is exactly what i was trying to do

Made4uo-Ribe
Shopify Partner
9145 2183 2696

Good to hear! Welcome. 

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 ⚙️.
YoavC
New Member
13 0 0

I am looking for the same solution. I would like to align my email subscripition to the menus in my footer. Can you specify where to paste this code? Thank you in advance

lyna123
Tourist
11 0 1

hey did you find something?  :// i don't know how to do it.. Thanks in advance..

Vinsinfo
Shopify Partner
460 158 157

@lyna123 Can you please share your store URL to help you with this?

Please reach out to bizdev@vinsinfo.com for any enquires related to Shopify.
Our Services: Custom Theme Development, Theme Customization, Custom Feature Implementation, Data Migration, Custom APP Development, Website Optimization and Google Merchant Center Support
lyna123
Tourist
11 0 1

https://dreadofheaven.com/

miquai (for password

lyna123
Tourist
11 0 1

hey did you find something?  :// i don't know how to do it.. Thanks in advance