Draft Theme - Footer Menu Adjustment

[berkeyazer]

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.

[Made4uo-Ribe · Accepted solution]

Hi @berkeyazer 

Would you mind to share your store URL? Thanks!

[berkeyazer · Accepted solution]

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

[berkeyazer · 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 · Accepted solution]

Hi @berkeyazer 

Would you mind to share your store URL? Thanks!

[berkeyazer]

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]

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

[berkeyazer]

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

[Made4uo-Ribe]

Thanks for the info, Do you mean like this? 

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!

[berkeyazer]

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]

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. 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[berkeyazer]

@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.

[Made4uo-Ribe]

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!

[berkeyazer]

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]

it is okay like this?

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!

[berkeyazer]

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.

[Made4uo-Ribe]

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!

[berkeyazer]

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.

[Made4uo-Ribe]

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!

[berkeyazer · Accepted solution]

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

[berkeyazer · 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 · 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!

[berkeyazer]

@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 ?

[Made4uo-Ribe]

Hello, Im good. Thanks! And you?

do you mean like this? 

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!

[berkeyazer]

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]

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]

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!

[berkeyazer]

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