[Doug Lowthian]

The header is responsive, it’s just that the logo element is not. What do I need to change and exactly where to allow my header image to be responsive with the rest of the site? Thanks in advance.

My site: http://heritageleader.net/

[Christian Wach]

Hi @douglowthian – you have two options:

1. Add your image via the CBOX Theme Options as a background image in the header section
2. Add some custom CSS to your site for the Logo Image to become responsive

The first option means you’ll have to separate out the “logo” part of the image from the “background” and uploading them separately, whilst the second means tweaking the position and size of the existing image at appropriate screen sizes.

I have included some CSS below that does very basic responsiveness for your current approach, but it may need the header height tweaking:

@media all and (max-width: 924px) {
	.icext-header-logo img {
		max-width: 80%;
		bottom: 0;
		position: absolute;
	}
}

@media all and (max-width: 600px) {
	.icext-header-logo img {
		max-width: 60%;
	}
}

@media all and (max-width: 420px) {
	.icext-header-logo img {
		max-width: 40%;
	}
}

This can be added to “Custom CSS” in the CBOX Theme Options page, under “Global”

[Author]

Posts