How Logo Size Works

In the Omniverse Header Builder, the logo size is controlled by multiple factors to ensure it displays correctly across all devices and header states.

Factors Affecting Logo Size #

1. Maximum Width Setting
   • The Logo Width option in the element settings defines the maximum width of the logo.
   • The logo cannot be wider than this value.
   Example: If your logo’s physical width is 369px, the maximum width can be set between 10px and 369px. Any value above 369px will not work without editing the image externally.
2. Header Row Height
   • The logo cannot exceed the height of the header row in which it is placed.
   • If the row is shorter than the logo’s physical height, the logo will scale down while maintaining its aspect ratio.
3. Logo Image Dimensions and Aspect Ratio
   • The logo cannot be stretched or distorted.
   • Its aspect ratio is always maintained for all screen widths and header states (desktop, sticky, and mobile).

Additional Details #

• The Logo Width option only sets a maximum width. It does not stretch the logo beyond its physical dimensions.
• If the row height is smaller than the logo image, the logo automatically scales down to fit while preserving proportions.

Add Width and Height Attributes #

The Add Width and Height Attributes option in the Logo element settings:

• Adds explicit width and height to the logo image
• Helps remove the “Images have no explicit width and height” issue in Google PageSpeed Insights

This ensures better performance and optimized rendering of your logo on all devices.