Docs

[Lyser]

Hello,
I’ve changed the logo for the mobile version with this code :

@media (max-width: 500px){
    .x-brand.img {
        background: url(http://127.0.0.1:4001/wordpress/wp-content/uploads/2017/01/logo-mobile_193x95.gif) no-repeat top left;
        background-size: 193px 95px;
		height:95px;
    }
    .x-brand.img img {
        opacity: 0;
    }
}

It’s ok except the background who extend verticaly too much and the menu icon is going too low

what i’ve got :

what i want :

How could i fix this ?

the site

[Thai]

Hi There,

Please update your code to this:

@media (max-width: 500px){
    .x-brand.img {
        background: url(http://www.lyser.fr/testwp/wp-content/uploads/2017/01/logo-mobile_193x95.gif) no-repeat top left;
        background-size: 193px 95px;
		height:95px;
    }
    .x-brand.img img {
        opacity: 0;
    }
}

Hope it helps 🙂

[Lyser]

It didn’t change anything, sorry but it’s the same code but with a redirection image, is this new code really suposed to change something to the header background height ?

[Jade]

Hi there,

Please try this code:

@media (max-width: 500px){
    .x-brand {
        width: 200px;
    }
    .x-brand.img {
        background: url(http://127.0.0.1:4001/wordpress/wp-content/uploads/2017/01/logo-mobile_193x95.gif) no-repeat top left;
        background-size: 193px 95px;
		height:95px;
    }
    .x-brand.img img {
        opacity: 0;
    }
}

Please adjust the width of x-brand accordingly.

Hope this helps.

[Lyser]

Perfect, thx a lot ! 🙂

[Nico]

Happy to hear that.

Feel free to ask us again.

Thanks.

[Author]

Posts