Customize Logo Height when Using a Custom Logo in New Universal Login Pages
Last Updated:
Overview
When using a custom logo for an application, as explained in the Auth0 documentation Customize New Univeral Login Pages - CSS Customization, there might be an issue with the height of the logo.
Once the custom logo is specified by adding class="_use-custom-prompt-logo" in the <body> element, the height set in the No-code customization options in the Dashboard is not applied anymore. The height appears to be hardcoded to 60px.
This article provides a potential workaround for this issue.
Applies To
- Custom Logo Height
- New Universal Login
Cause
Review the HTML from the element with id="custom-prompt-logo":
<div title="My Test Tenant" id="custom-prompt-logo" style="width: auto !important; height: 60px !important; position: static !important; margin: auto !important; padding: 0 !important; background-color: transparent !important; background-position: center !important; background-size: contain !important; background-repeat: no-repeat !important"></div>
Because of the ‘!important’ tags, setting the height for this element ID is not possible.
Solution
Consider the following workaround for the issue. Use max-height to set a smaller height or min-height to set a height above 60px, like in this example:
#custom-prompt-logo {
background-image: url('https://cdn.auth0.com/blog/auth0rta/theme/logos/auth0-logo-black.png');
min-height: 80px;
}
