Site logo

Archived topic

Marketer Theme Footer Customization

7 replies · Started by Liam on March 8, 2022

Viewing posts 1–8 of 8

Hi there,

Please can you let me know how I customize the footer bar in the Marketer theme so that I can have it as follows:

[WPML language switcher] left aligned - [Copyright notice] center aligned - [Privacy policy] page link right aligned

Including link to sample page in private area.

Thanks.

Hi Liam,

Try this CSS:

.footer-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}
@media (min-width: 769px) {
    .copyright-bar {
       position: absolute;
    }
}

Great! Thanks, Ying. Looks perfect.

The only thing now is the mobile view. Will include a link in the private area.

In mobile view, is there a way to have those elements stacked vertically on top of each other? (the top two elements are side-by-side currently)

Thank you.

Hi Liam,

If that's the case, can you try altering Ying’s code to something like this:

@media (min-width: 769px) {
    .copyright-bar {
       position: absolute;
    }
    .footer-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    }
}

Kindly let us know how it goes. :)

That doesn't seem to have worked unfortunately, Fernando. Maybe I'm doing something wrong?

Including screenshot in the private area - this is from the updated version with the CSS you provided above.

Thanks.

On my end, I can see that this is the code you currently have:

.footer-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

@media (min-width: 769px) {
    .copyright-bar {
       position: absolute;
    }
    .footer-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    }
}

See: https://share.getcloudapp.com/Wnuy15bD

The first part should be removed. Specifically, it should just be:

@media (min-width: 769px) {
    .copyright-bar {
       position: absolute;
    }
    .footer-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    }
}

Kindly modify your CSS any let us know how it goes. :)

Got it. Perfect. Thanks again, Fernando.

You’re welcome Liam! Glad that worked! :)

This archived topic is closed to new replies.