How to arrange vertically or put the image below the menu links and social media icons on footer

Shopify Discussion
1

Hello, can someone help me please? I want to put the image below the menu links and social media icons. I can’t find any solution for this.

I’ll appreciate your help in solving this problem. Thank you..

PS - the menu links are fine. I just need to put the image below the menu links and social media icons like the photo shown above.

2

Hello,

Welcome to the Shopify Community.
I read your problem and it seems that I need to analyze your website to provide the solution here.
Would you please share your website URL and if your website is password protected then also provide the password.

3

Share Preview Link With Pass

4

Hello @Hardik29418 ,

Here.

https://www.bhlclothing.com/

pass: bhlclothingwebshop

5

Hello!

Here.

https://www.bhlclothing.com/

pass: bhlclothingwebshop

6

Please go to

  1. Online store
  2. Themes → Edit theme
  3. Layout
  4. theme.liquid and paste this code before

If it was helpful, then please like and accept it as a solution.

7

Hello @Hardik29418 , Thank you! It worked below the menu links however it is still above the social media icons. Do you have follow-up solution for this?

Lastly, will you be able to help me remove that excessive gaps above and below the image? :folded_hands:

8

Add This css in your edit code > base.css File

ul.footer-block__details-content.list-unstyled {
    display: flex;
    width: 100%;
    justify-content: center;
}
.footer__blocks-wrapper.grid.grid--1-col.grid--2-col.grid--4-col-tablet {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: 60px;
}
ul.footer-block__details-content.list-unstyled {
    display: flex;
    justify-content:center;
}
.footer-block.grid__item.footer-block--menu {
    width: 100%;
}
.footer__content-top.page-width {
    position: relative;
}
.footer-block--newsletter {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%);
}
ul.footer-block__details-content.list-unstyled{
    align-items: baseline;      
}
@media screen and (max-width:767px){
    .footer-block--newsletter {
        position: absolute;
        top: 40%;
        transform: translate(-50%);
    }
    .footer__blocks-wrapper.grid.grid--1-col.grid--2-col.grid--4-col-tablet {
        gap: 20px;
    } 
    .footer-block.grid__item {
        margin: 0 0 !important;
    }
    ul.footer-block__details-content.list-unstyled {
        flex-wrap: wrap;
        gap: 0 15px;
    }  
}
@media screen and (max-width:600px){
    .footer-block--newsletter {
        position: absolute;
        top: 30%;
    }
    .footer__blocks-wrapper.grid.grid--1-col.grid--2-col.grid--4-col-tablet {
        gap: 0px;
    }
}
@media screen and (max-width:425px){
    .footer-block--newsletter {
        position: absolute;
        top: 33%;
        transform: translate(-50%);
    }
}
9

Please go to

  1. Online store
  2. Themes → Edit theme
  3. Layout
  4. theme.liquid and paste this code before

Still, if you want to remove the space, then you need to crop the white space of the logo.

10

Hello @Raj-webdesigner ,

Your solution is almost perfect and I settled on its output instead (please see the photo). However, the gaps between menu links and copyright is too much especially on mobile view.

Can you please assist how to adjust it? Lastly, can you also share how to set the menu links order in vertical instead (for mobile also)? Thank you.

11

Replace Full My Old Code With This Code

ul.footer-block__details-content.list-unstyled {
    display: flex;
    width: 100%;
    justify-content: center;
}
.footer__blocks-wrapper.grid.grid--1-col.grid--2-col.grid--4-col-tablet {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: 60px;
}
ul.footer-block__details-content.list-unstyled {
    display: flex;
    justify-content:center;
}
.footer-block.grid__item.footer-block--menu {
    width: 100%;
}
.footer__content-top.page-width {
    position: relative;
}
.footer-block--newsletter {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%);
}
ul.footer-block__details-content.list-unstyled{
    align-items: baseline;      
}
@media screen and (max-width:767px){
    .footer-block--newsletter {
        position: absolute;
        top: 25%;
        transform: translate(-50%);
    }
    .footer__localization:empty {
      display: none;
    }
    .footer__blocks-wrapper.grid.grid--1-col.grid--2-col.grid--4-col-tablet {
        gap: 20px;
        margin: 0;
    } 
    .footer-block.grid__item {
        margin: 0 0 !important;
    }
    ul.footer-block__details-content.list-unstyled {
        flex-direction: column;
        gap: 0 15px;
        margin: 0 0 !important;
    }  
    .footer-block__details-content li {
        display: flex;
        width: 100%;
        justify-content: center;
    }   
}
@media screen and (max-width:600px){
    .footer__blocks-wrapper.grid.grid--1-col.grid--2-col.grid--4-col-tablet {
        gap: 0px;
    }
}
12

put again bro i edited code again

13

This is perfect and solved the problem already. Thank you!!