Mobile Image Not Showing in X-Integrity

I have followed your instructions for swapping out the standard logo for a more mobile-friendly version of the logo. However, I cannot get the mobile logo to appear… Making the standard logo invisible (by setting opacity to “0”) leaves me without any visible logo. The site is https://www.speiserlaw.com.

Hello Stephen,

Thanks for writing in! I am seeing that you have added this custom CSS code:

.single .entry-featured {
  float: right;
  max-width: 400px;
  width: 30%;
  margin-right: 2em;
}
 .x-btn.my-btn-class {
	 height: auto !important;
	 padding: 0px 0px !important;
    margin-top: 2px;
    margin-left: 5px;
}

    .x-btn.my-btn-class:hover {
			height: auto !important;
			color: #ffffff;
				background: #535353;
    padding: 5px 5px !important;
    margin-top: 5px;
    margin-left: 10px;
    }
@media (max-width: 979px) {
  .x-brand.img {
        background: url(https://www.speiserlaw.com/wp-content/uploads/2021/11/Mobile-Menu-Logo-C4.png) no-repeat center center;
        background-size: contain;
    }
    .x-brand.img img {
        opacity: 100%;
    }
	.x-brand {
		width: 80%;
		margin-top: 8px;
		margin-left: 8px;
  }
	.x-navbar {
    height: 0px;
  }
  .x-btn-navbar {
    margin-top: 15px;
  }
}

please remove this code from Appearance > Customize > Additional CSS. It is best that you add that custom CSS code in Cornerstone > Theme Options > CSS to make sure that it will be applied to your header logo image.

Kindly let us know how it goes.

I thank you for the prompt reply. I have migrated the CSS coding over to Cornerstone>Theme Options>CSS, but I still get the same result: No logo appears in the background, and so I am keeping opacity of the original logo at 100% for the time being. Any other suggestion?

Hello Stephen,

In order to help you with your concerns, we need to check your settings. Please share your details in a secure note. Please provide the following details

  • WordPress Login URL
  • Admin level username and password

You can find the Secure Note button at the bottom of your posts

Thanks

Hello Stephen,

I have copied your custom CSS and I found an issue:

There are some weird characters added to the code. So I have copied it and paste it on my text editor to tidy up the code.

@media (max-width: 979px) {
	.x-brand.img {
		background: url(https://www.speiserlaw.com/wp-content/uploads/2021/11/Mobile-Menu-Logo-C4.png) no-repeat center center;
		background-size: contain;
	}

	.x-brand.img img {
		opacity: 0;
	}

	.x-brand {
		width: 80%;
		margin-top: 8px;
		margin-left: 8px;
	}

	.x-navbar {
		height: 0px;
	}

	.x-btn-navbar {
		margin-top: 15px;
	}
}

This should resolve your issue. Kindly let us know how it goes.

That fixed it, thank you!

Hello Stephen

Glad that we were able to help you. Please feel free to open a new thread if you have any more concerns.

Thanks

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.