I’ve got a tricky question. I’ve got a site structured that is essentially the like Integrity Demo 4. Instead of using the site name text for the logo, I’ve uploaded a logo image. However, when using the image logo the header looks awful when the screen switches to a tablet/mobile layout. Is there any way to set things up to have the logo switch from image to text when the screen is a table/phone? Thanks in advance for your help!

AT

Thanks for writing in.

There is already a hidden text logo element is included with the Integrity 4 version.

We can help you to fix it with a CSS media query to switch between mobile/tablet and desktop versions.

Kindly share your URL.So we can provide you with the code to make it work.

Thanks!

Please add the following CSS under Customize -> Custom -> CSS :

@media (max-width:760px){
.x-navbar h1.visually-hidden {
width: auto;
position: static;
height: auto;
}
.x-brand img{
display:none;
}
}

Hope it helps.

Please update the code that was already on your Custom > CSS in the Customizer.

@media (max-width: 980px){
	.x-navbar h1.visually-hidden {
		width: auto;
		position: static;
		height: auto;
		float: left;
		font-size: 3em;
		color: red;
	}
	.x-brand img{display:none;}
}

@media (max-width: 479px) {
	.x-navbar h1.visually-hidden {font-size: 2.5em;}
}

Change the color red value to any color you want.

Hope it helps, Cheers!

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thanks.

This <h1 class="visually-hidden"></h1> is only available at site’s home page. And it’s there as SEO requirement since home pages doesn’t have head titles compared to normal pages. Please remove all css suggested above, instead, please follow this.

Because this requires a template change, I’d advise that you setup a child theme. This allows you to make code changes that won’t be overwritten when an X update is released. After your child theme is setup, please review how we recommend making template changes in Customization Best Practices.

Add this code at your child theme’s functions.php

add_action('x_before_view_global__brand', 'add_mobile_logo_text');
function add_mobile_logo_text ( ) {
echo '<div class="mobile_logo_text">'.get_bloginfo( 'name' ).'</div>'.do_shortcode('[responsive_text selector=".mobile_logo_text" compression="1" min_size="14px" max_size="40px"]');
}

Then add this css at your customizer’s custom css.

.mobile_logo_text {
display: none;
}
@media (max-width: 979px) {
.x-brand img{ display:none; }
.mobile_logo_text { display: block; }
}

Hope this helps.