Re: Draft Theme - Footer Menu Adjustment

Solved

Draft Theme - Footer Menu Adjustment

berkeyazer
Excursionist
28 2 3

Hello,

 

I need help to adjust my footer menu;

 

1st) I want to put payment icons to the right sight of the menu, and powered by Shopify text and icons should have a ratio between them. It is not good if one of them is directly next to the side of the page and the other one has a dsitance from the other side of the page. 

 

2nd) I added above line as a section but it looks very thick and ugly. I want to put the same line between payment icons and email box in below screenshot. 

 

3rd ) I want to move a bit down the subscription text and email box, somewhere in the middle of the space right above of payment icons.

 

I would be very happy if it is possible to adjust all these.

 

Thank you very much.

 

berkeyazer_0-1715024952415.png

 

Accepted Solutions (4)

Made4uo-Ribe
Shopify Partner
6827 1627 2002

This is an accepted solution.

Hi @berkeyazer 

Would you mind to share your store URL? Thanks!

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.

View solution in original post

berkeyazer
Excursionist
28 2 3

This is an accepted solution.

Dear, we still have the space between line and image, where red dots are in 😞

berkeyazer_0-1715201256615.png

 

View solution in original post

berkeyazer
Excursionist
28 2 3

This is an accepted solution.

I changed the top padding from 28 to 0 on theme customization and it worked after, @Made4uo-Ribe thank you very much for all your assistance, it helped a lot !!!!!!

View solution in original post

Made4uo-Ribe
Shopify Partner
6827 1627 2002

This is an accepted solution.

Oh, the line on the image I think its the margin that I provide. Good thing it solve now. Would you mind to hit likes for me. Thanks!

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.

View solution in original post

Replies 24 (24)

Made4uo-Ribe
Shopify Partner
6827 1627 2002

This is an accepted solution.

Hi @berkeyazer 

Would you mind to share your store URL? Thanks!

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.
berkeyazer
Excursionist
28 2 3

Hi @Made4uo-Ribe , it is https://7hills.shop/ , but it is passworded, I don't want to share the password, is it possible to get help like this ?

Made4uo-Ribe
Shopify Partner
6827 1627 2002

Yes, you can pm me. If you dont like to public. Thanks!

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.
berkeyazer
Excursionist
28 2 3

Hi @Made4uo-Ribe I sent the message on private, thank you a lot.

Made4uo-Ribe
Shopify Partner
6827 1627 2002

Thanks for the info, Do you mean like this? 

Made4uoRibe_0-1715100895377.png

 

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-bottom.scroll-trigger.animate--slide-in {
    display: flex;
    flex-direction: row-reverse;
}
.footer__content-bottom {
    border-top: 4px solid #395366;;
}
.footer__content-top.page-width {
    padding-bottom: 2rem;
}
@media only screen and (min-width: 749px){
.footer__localization:empty+.footer__column--info {
    align-items: flex-end;
}
}

 

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 is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.
berkeyazer
Excursionist
28 2 3

Hi, actually no, loaciton of payment icons and powered by text is okay, however that bold lines should be oppositliy thin. Above line should look like the one at the bottom, not the opposite way.

Made4uo-Ribe
Shopify Partner
6827 1627 2002

Please, try to paste the code in your base.css and see yourself the result. Im not sure what you mean by opposite because I clearly copied the custom border you add and even copied the same color. 

Made4uoRibe_0-1715105317173.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 is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.
berkeyazer
Excursionist
28 2 3

@Made4uo-Ribe  I apologize if I could not define well, actually I dont want to have that custom border at the bottom of footer. I want the default line at the bottom of the footer which is between payment icons and email box, at the top of the footer too. I mean the above border of the footer but in the same format with current section bottom lines.

 

berkeyazer_1-1715108682102.png

 

 

Made4uo-Ribe
Shopify Partner
6827 1627 2002

Oh, okay. So confusing. I check your store again you add image banner. You still want to add border on the top. If we add it would not be visible. 

 

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 is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.
berkeyazer
Excursionist
28 2 3

Hi @Made4uo-Ribe, yes I added an image, yes please lets add it, because image is only on the main page, rest of them doesnt have anything between footer menu and other things above of it. It looks like they are all together, but we just want to seperate it with the default thin line of sections 🙂 sorry for confusion.

Made4uo-Ribe
Shopify Partner
6827 1627 2002

it is okay like this?

Made4uoRibe_0-1715185948950.png

I add same below. Same Instruction. 

 

.footer:not(.color-scheme-1) {
    border-top: solid .1rem rgba(var(--color-foreground), .08);
    margin-top: 10px;
}

 

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 is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.
berkeyazer
Excursionist
28 2 3

I tried but it didnt appear in any pages, and there is no need to add a space between that image and the line, they can be touching to each other on main page and then it will be visible on other pages as usual.

berkeyazer_0-1715187362893.png

 

Made4uo-Ribe
Shopify Partner
6827 1627 2002

Remove the code then, and change on this one. 

 

.footer__content-top.page-width {
  border-top: solid .1rem rgba(var(--color-foreground), .08);
  padding-top: 28px;
}
.section-sections--21170297995597__footer-padding {
        padding-top: 0px; 
}

 

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 is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.
berkeyazer
Excursionist
28 2 3

Hi my friend, it worked now thank you a lot. However I think there is a misunderstanding, I need to remove the space where red dots are in, and extend the line until the borders of the page to right and left side of the page, trough yellow arrows.

 

berkeyazer_0-1715194707914.png

 

Made4uo-Ribe
Shopify Partner
6827 1627 2002

Add this code.

 

.footer__content-top.page-width {
    max-width: 100%;
}
.footer__blocks-wrapper {
    width: 100rem;
    margin: auto;
}

 

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 is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.
berkeyazer
Excursionist
28 2 3

This is an accepted solution.

Dear, we still have the space between line and image, where red dots are in 😞

berkeyazer_0-1715201256615.png

 

berkeyazer
Excursionist
28 2 3

This is an accepted solution.

I changed the top padding from 28 to 0 on theme customization and it worked after, @Made4uo-Ribe thank you very much for all your assistance, it helped a lot !!!!!!

Made4uo-Ribe
Shopify Partner
6827 1627 2002

This is an accepted solution.

Oh, the line on the image I think its the margin that I provide. Good thing it solve now. Would you mind to hit likes for me. Thanks!

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.
berkeyazer
Excursionist
28 2 3

@Made4uo-Ribe Hi my friend, I hope you are good.

 

I need your help about our topic for phone version.

 

Our line does not appear on phone version. Also on the main page of the phone version, there is no blank between the title '' Policies '' and the image. Could you help for them as well ?

 

berkeyazer_1-1715799321278.png

 

 

berkeyazer_0-1715799236038.png

 

Made4uo-Ribe
Shopify Partner
6827 1627 2002

Hello, Im good. Thanks! And you?

 

do you mean like this? 

Made4uoRibe_0-1715803950835.png

If it is check 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:

 

@media only screen and (max-width: 749px){
.footer__content-top.page-width {
    padding-top: 4rem;
}

.footer-block__details-content a.list-menu__item--link {
    padding: 0px !important;
}
}

 

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 is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.
berkeyazer
Excursionist
28 2 3

Hello Dear @Made4uo-Ribe , unfortunatley it didnt work. It still looks very close to upper image and also there is no line at the top of footer menu.

berkeyazer_0-1716229052909.pngberkeyazer_1-1716229064053.png

 

berkeyazer
Excursionist
28 2 3

hello @Made4uo-Ribe would you have time to check this one ? Its the only missing part in my website,then everything will be completed.

Made4uo-Ribe
Shopify Partner
6827 1627 2002

Please paste thiso ne on the custom css on the customize theme edit. On the footer area. Thanks!

 

@media only screen and (max-width: 749px){
.footer__content-top.page-width {
    padding-top: 4rem !important;
}

.footer-block__details-content a.list-menu__item--link {
    padding: 0px !important;
}
}

 

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 is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.
berkeyazer
Excursionist
28 2 3

@Made4uo-Ribe Hi, I could not save it, it showed me the error '' Correct the errors to save your custom CSS. ''