Mobile header too wide

[JulieRHiggins]

Hello,
My header is perfect on desktop but when the website is viewed on mobile devices, the header is very wide and people keep telling me that something is not loading (thinking that something should load in the empty white space of the header though nothing is there to load). What can I do to keep desktop the same but make mobile look better?

Home - BowTie Frenchies Honest and Reputable French Bulldog Breeder

I can change it back and forth by replacing my logo image with a smaller image, but then the desktop version of the logo looks too small. I saw how to alter the sections to be either visible or not visible on the different size devices, but can this be done for a header as well?

[friech]

Hi Julie,

Thank you for writing in, please add this to Theme Options > CSS to reduce the logo size on mobile view.

@media (max-width: 480px) {
	.x-brand {
		margin-top: 35px;
	}
	.x-brand img {
    	max-width: 200px;
	}
}

That white space on the header is the HEADER WIDGET AREAS, you can deactivate that under X > Theme Options > Header. Or if you want to put a content in there navigate to Appearance > Widgets and add widgets to header 1 - header 4 sidebars.

WordPress Widgets

Hope it helps,
Cheers!

[JulieRHiggins]

@friech

@media (max-width: 480px) {
.x-brand {
margin-top: 35px;
}
.x-brand img {
max-width: 200px;
}
}

It worked perfectly! Thank you!

[christian]

You’re welcome. Please just note though that custom coding is outside the scope of our support. The code provided only serves as a guide and we do not support issues arising from custom code and further enhancements.

If you have more header customizations in mind, I’d recommend that you upgrade to Pro so you have the freedom to build a custom header on top of additional awesome features like header assignment, hiding elements based on screenwidth, etc…

Thanks.