Sticky header logo is different than regular header logo

Hello Mohamed-

Thanks for the question, and thanks for using the Crio WordPress theme for business.

By default, the sticky header is a little smaller than the top header, and the logo is also shrunken down a little as well.

You can prevent your logo from changing size in the sticky header with a Custom CSS rule. Check out the troubleshooting section of this article to learn how to prevent the logo from resizing.

To summarize, add this rule to your Custom CSS in Customize > CSS/JS Editor:

.header-top .bgtfw-sticky-header.bgtfw-stick .custom-logo-link .custom-logo {
	width: unset;
}

Hi Mohamed-

The code above worked for me with Crio out-of-the-box, but depending on what modifications you’ve made it may need to change. It’s tough to say for sure without being able to look at your site while it has the maintenance mode plugin active.

Is it possible for you to use the WP Maintenance Mode settings to exclude a specific page so we can take a closer look for you?

Hi Mohamed-

Thanks for disabling Maintenance Mode! I can see the problem, there is a typo in the Custom CSS.

Right now, it looks like this:

header-top .bgtfw-sticky-header.bgtfw-stick .https://www.sidehustlelead.com/wp-content/uploads/2021/08/sidehustlelead-logo-min.png sidehustlelead-logo-min {
	width: unset;
}

Double check your Custom CSS, and copy-and-paste this line in exactly as it is (don’t forget the first dot at the beginning):

.header-top .bgtfw-sticky-header.bgtfw-stick .custom-logo-link .custom-logo {
	width: unset;
}

• This reply was modified 3 years, 3 months ago by Jesse Owens.