Docs

[Alex]

Hello,

how can I change the size of the logo when it changes to mobile view.
Or can I even change the whole logo-image?

Thank you very much for your help!

Regards,
Alex

[Alex]

This reply has been marked as private.

[Rad]

Hi there,

Thanks for posting in.

That’s possible, please add this CSS to Admin > Appearance > Customizer > Custom > Global CSS with your preferred size.

@media ( max-width: 767px ) {

.x-brand.img {
width: 60%;
}

.x-brand.img img {
width: 100%;
}

}

Cheers!

[Alex]

Thank you very much!
It worked! 🙂

Cheers!

[Lely]

You’re welcome!

Always,
X

[Alex]

Hello,

is there any possibility to change the image when it goes to mobile view.

Thanks!

Regards,
Alex

[Thai]

Hi Alex,

Please add the following CSS:

@media (max-width: 979px){
    .x-brand.img img {
        opacity: 0
    }
    .x-brand.img {
        background: url(http://traube-bellenberg.de/wp-content/uploads/2016/04/traube-logo.png) no-repeat center center;
        background-size: 100% 100%;
    }
}

Then replace http://traube-bellenberg.de/wp-content/uploads/2016/04/traube-logo.png with your logo for the mobile version.

Hope it helps 🙂

[Alex]

It worked!
Thanks,

But now I must decrease the header height.

[Alex]

I figured it out

.x-navbar {
    height: 90px;
}

one more question:
on small display sizes jumps the mobile menu button out of the navbar

How can we fix that?

[Alex]

This reply has been marked as private.

[Lely]

Hello There,

Please adjust the following custom CSS:

@media (max-width: 340px){
 .x-brand.img {
        background: url(/wp-content/uploads/2016/04/traube-logo-schmal.png) no-repeat 0px 10px;
        background-size: 100%;
    }
	.x-brand {
	width: 180px;
	height: 80px;
	}
}

To this:

@media (max-width: 340px){
 .x-brand.img {
        background: url(/wp-content/uploads/2016/04/traube-logo-schmal.png) no-repeat 0px 10px;
        background-size: 100%;
    }
	.x-brand {
	width: 150px;
	height: 80px;
	}
}

There’s not enough space to display the logo and the menu button in one line. We have to reduce the logo’s width.

Hope this helps.

[Alex]

Thx!

[Rupok]

You are welcome!

[Author]

Posts