Docs

[Sandie]

Hi,

I need some help with my footer.

1. I want the footer menu “items” to be BLACK, and when hovered over I want them to be PINK. But only the footer menu, not the social icons.

http://prntscr.com/cy8hgo

2. I want the logo (Sandra Mildon) to be placed a little bit more to the left. But it needs to look good at smaller devices as well.

http://prntscr.com/cy8i8f

http://prntscr.com/cy8kpx

http://sandramildon.com

Thanks!

Best Regards
/Sandra

[Paul R]

Hi Sandra,

You can add this under Custom > Edit GlobaL CSS in the Customizer.

/* footer links */
.x-colophon.bottom .x-nav li a {
    color: #000;
}

.x-colophon.bottom .x-nav li a:hover {
    color: #ff69b4;
}

/* Footer logo position */

.x-colophon.bottom {
    background-position: 50px 0;
}

/* footer adjustments for mobile */
@media (max-width: 520px) {
.x-colophon.bottom .x-colophon-content {
    position:static;
    clear:both;
}
.x-colophon.bottom .x-nav a {
    font-size: 12px;
}

footer .x-social-global {
    text-align: center;
    clear:both;
    float:none;
    width:100%;
}

.x-colophon.bottom {
    padding:80px;
    background-position:top left;
}

.x-colophon.bottom .x-nav {
   float:none;
}
}

Hope that helps.

[Sandie]

Great, thank you.

Just some small adjustments.

1. Can you remove the logo when displayed on small devices (mobile).

2. Is it possible to get ALL the footer menu items to be displayed on ONE line? Now two of them position themself below the other two. As seen in the picture:

http://prntscr.com/cy9qsn

Thanks!

Regards
/Sandra

[Thai]

Hi There,

Please add the following CSS:

@media (max-width: 480px){
    .x-colophon.bottom {
        background-image: none;
        padding-left: 0;
        padding-right: 0;
    }
    .x-colophon.bottom .x-container.max.width {
        max-width: 100%;
        width: 100%;
    }
    .x-colophon.bottom .x-nav li:after {
        margin: 0 6px;
    }
}

Hope it helps 🙂

[Sandie]

Hi,

That worked perfectly.

Is it possible to do the same for the middle devices aswell? It’s the logo that messes things up. It only looks good on bigger screens and laptops I think. What would you recommend me doing?

Thanks!

Best Regards
/Sandra

[Christopher]

Hi there,

Please update your code to :

@media (max-width: 979px){
    .x-colophon.bottom {
        background-image: none;
        padding-left: 0;
        padding-right: 0;
    }
    .x-colophon.bottom .x-container.max.width {
        max-width: 100%;
        width: 100%;
    }
    .x-colophon.bottom .x-nav li:after {
        margin: 0 6px;
    }
}

Hope it helps.

[Author]

Posts