[atjonesenParticipant]

Hey there,

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

[SenthilMember]

Hi there,

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!

[atjonesenParticipant]

This reply has been marked as private.

[ChristopherModerator]

Hi there,

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.

[atjonesenParticipant]

Thanks for the code – it worked great to change the logo from an image to text. However, now the text is too large (appears to be forcing h1) causing the the navbar to look wonky. Is there anyway to adjust the size/color of the text it switches to?

[FriechModerator]

Hi there,

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!

[atjonesenParticipant]

Awesome that worked great! The only remaining issue I’m finding is that on all accessory pages (non-homepage) there is no text being displayed after the switch. Any thoughts on how to get that corrected to ensure the switch is happening on all pages? Thanks again – sorry for the multiple requests!

[FriechModerator]

Hi there,

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.

[atjonesenParticipant]

This reply has been marked as private.

[RadModerator]

Hi there,

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.

[atjonesenParticipant]

This reply has been marked as private.

[FriechModerator]

Hi There,

Try to update the CSS code above to this

.mobile_logo_text {display: none;}
@media (max-width: 979px) {
	.x-brand img { display:none; }
	.mobile_logo_text { display: inline-block;font-size: 2.5em !important; }
	.x-btn-navbar, .x-btn-navbar.collapsed {margin-top: 3%;}
}

Hope it helps, Cheers!

[atjonesenParticipant]

This reply has been marked as private.

[ThaiModerator]

Hi There,
Upon checking your site you have cache plugin activated, Please deactivate and clear browser cache and it should solve the layout issue.
Hope it helps.
Thank you.

[Author]

Posts