Solved

Draft Theme - Footer Menu Adjustment

berkeyazer
Tourist
20 2 1

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
5930 1425 1755

This is an accepted solution.

Hi @berkeyazer 

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.❤️❤️❤️
For FREE, premium codes, and trusted, knowledgeable Shopify developers, visit us at

Made4uo.com


View solution in original post

berkeyazer
Tourist
20 2 1

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
Tourist
20 2 1

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
5930 1425 1755

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!

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.❤️❤️❤️
For FREE, premium codes, and trusted, knowledgeable Shopify developers, visit us at

Made4uo.com


View solution in original post

Replies 20 (20)

Made4uo-Ribe
Shopify Partner
5930 1425 1755

This is an accepted solution.

Hi @berkeyazer 

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.❤️❤️❤️
For FREE, premium codes, and trusted, knowledgeable Shopify developers, visit us at

Made4uo.com


berkeyazer
Tourist
20 2 1

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
5930 1425 1755

Yes, you can pm me. If you dont like to public. 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.❤️❤️❤️
For FREE, premium codes, and trusted, knowledgeable Shopify developers, visit us at

Made4uo.com


berkeyazer
Tourist
20 2 1

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

Made4uo-Ribe
Shopify Partner
5930 1425 1755

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!

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.❤️❤️❤️
For FREE, premium codes, and trusted, knowledgeable Shopify developers, visit us at

Made4uo.com


berkeyazer
Tourist
20 2 1

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
5930 1425 1755

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!

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.❤️❤️❤️
For FREE, premium codes, and trusted, knowledgeable Shopify developers, visit us at

Made4uo.com


berkeyazer
Tourist
20 2 1

@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
5930 1425 1755

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!

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.❤️❤️❤️
For FREE, premium codes, and trusted, knowledgeable Shopify developers, visit us at

Made4uo.com


berkeyazer
Tourist
20 2 1

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
5930 1425 1755

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!

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.❤️❤️❤️
For FREE, premium codes, and trusted, knowledgeable Shopify developers, visit us at

Made4uo.com


berkeyazer
Tourist
20 2 1

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
5930 1425 1755

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!

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.❤️❤️❤️
For FREE, premium codes, and trusted, knowledgeable Shopify developers, visit us at

Made4uo.com


berkeyazer
Tourist
20 2 1

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
5930 1425 1755

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!

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.❤️❤️❤️
For FREE, premium codes, and trusted, knowledgeable Shopify developers, visit us at

Made4uo.com


berkeyazer
Tourist
20 2 1

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
Tourist
20 2 1

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
5930 1425 1755

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!

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.❤️❤️❤️
For FREE, premium codes, and trusted, knowledgeable Shopify developers, visit us at

Made4uo.com


berkeyazer
Tourist
20 2 1

@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
5930 1425 1755

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!

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.❤️❤️❤️
For FREE, premium codes, and trusted, knowledgeable Shopify developers, visit us at

Made4uo.com