Site Logo

We use an intuitive approach to display logos on your site, providing excellent flexibility, especially for responsive projects. This method ensures that logos adjust smoothly across different screen sizes, making them look great on desktop, tablet, and mobile devices.

Please note, if you update the logo from the theme options panel, it will only affect the default header and footer logos. If the header and footer are loaded from a prebuilt template, you will need to customize that template separately.

Dimension

We offer great flexibility in setting the dimensions of the logo. By default, Savior will automatically adjust the dimensions. However, if the logo’s height exceeds the header height, parts of it might be cut off or shrunk. To set the dimensions of the logo, go to Savior > Theme Options > General > Site > Identity. Then, scroll to Logo Dimension and set the desired height and width of the logo.

Please note that to maintain the original aspect ratio, you should only set one of these dimensions. For example, if your logo is 150×100 pixels, set the height to 150 pixels and leave the width field empty. The width will adjust automatically.

Mobile Logo

You can set the mobile logo in the theme options panel by navigating to Savior > Theme Options > General > Site. Here, you can upload the mobile logo and adjust its dimensions.

Remember to also upload a dark version of the logo, as the UI toggles between light and dark modes when the navigation menu is clicked. To upload the dark version, click the sun icon next to the Mobile Logo title.

Common Questions

1. Can I use an SVG as a logo?

   Yes, you can use any valid image format for the logo, including SVG. However, by default, WordPress does not allow SVG uploads for security reasons. To enable SVG uploads, you will need to update the MIME type or use the SVG Support plugin.

2. Why are parts of the logo cut off?

   Parts of the logo may be cut off if the logo’s height exceeds the height of the header or container. In this case, you can either reduce the logo’s height or increase the height of the header or container by setting a min-height CSS property.

3. Why is the logo shrunk?

   We designed Savior so that one dimension of the logo will automatically adjust to match the other. If you set both the width and height, the logo may shrink if the actual dimensions of the image differ. To avoid this issue, you should only set one dimension.

4. Why isn’t the logo changing on mobile navigation?

   Remember to also upload a dark version of the logo, as the UI toggles between light and dark modes when the navigation menu is clicked. To upload the dark version, click the sun icon next to the Mobile Logo title.