A gray bar is showing in my header suddenly

Hi there. I need help please, I’m working in one of your demo projects as a base, and everything was fien but suddenly this bar in the photo start appearing, I tried to go back in history but it’s still showing up, any idea on how to resolve it please?

Hi Mathew,

Thanks for reaching out.
It seems that an external CSS code has been injected just above the header and which is the reason behind the issue you are having. I would recommend you remove any custom code added.
If that is not the case and you haven’t added any code, I would recommend you troubleshoot a few common issues on it.

1.Plugin Conflict
2.CSS/JS Customization
3.Disabling Cache

If you discover that an issue is coming from custom code or 3rd party plugin, kindly consult with a developer or contact the plugin author. Please note that we do not provide support for custom codes and 3rd party plugins.
If none of the above helps and you are still getting the issue, please provide login credentials for your site in a secure note to examine it further, including:

– WordPress Site URL & Login URL
– WordPress Admin username/password

To create a secure note, click the key icon underneath any of your posts.

Thanks

Hi thanks for your kind answer, in effect I’m adding css to some elements since your demo projects don’t have any animations and I want to add some, how can I add them without this annoying gray message above? Please let me know if you need my wordpress credentials in order to help me, thanks a lot.

The following is the code that I’m trying to use

$el { background-color: green; transition: transform 1s; /* Animation */ width: 250px; height: 250px; margin: 0 auto; } $el:hover { transform: scale(1.1); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */ }

Hi Mathew,

To better help you with your issue, please give us the following information in a Secure Note.

  • WordPress Login URL
  • Admin level username and password

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

Thank you.

ok Marc, I already sent you the credentials. Looking forward for your answer ,thanks.

Hi Matthew,

I just check your homepage and found out the root cause of the issue, please avoid adding the <style></style> tag in the custom CSS.

For example:

Wrong One:

<style>
$el {
  background-color: green;
  transition: transform 1s; /* Animation */
  width: 250px;
  height: 250px;
  margin: 0 auto;
}

$el:hover {
  transform: scale(1.1); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}
</style>

Correct One:

$el {
  background-color: green;
  transition: transform 1s; /* Animation */
  width: 250px;
  height: 250px;
  margin: 0 auto;
}

$el:hover {
  transform: scale(1.1); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}

Hope that helps and let us know how it goes.

Thank you.

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