To upload your own Logos & Favicon navigate to Theme Options > General > Logos & Favicon and locate the panel below on which you have the following options:
Favicon
Favicon is placed in the browser tab.
Standard Logo
It is placed on the header menu.
Sticky Logo
It is placed in the sticky menu.
Transparent Header Logo
It is placed over the transparent header.
Help article about how to manage transparent header
Mobile/Tablets Logo is placed on mobile header
Print Logo
The logo added here will apply to the Print page of the property page.
Increase Logo Size from Theme Options
By default header menu area has the height 90px. It means that 90px is the maximum size for logo you can setup to use with default header height.
If your logo is taller than the header and sticky header height, increased the height as well from Theme Options -> Header -> Header Settings
SVG icons as Logo
When an SVG Logo Doesn’t Appear or Is Invisible
Sometimes you might upload an SVG logo and it seems like nothing shows up on the site, even though the file is uploaded correctly. This usually happens because the SVG file doesn’t include explicit width and height attributes inside the SVG code itself. Without those dimensions, some browsers or themes may render the logo at zero size so it appears invisible.
Why This Happens
SVG files are scalable by design, which means they don’t always contain fixed pixel dimensions like PNG or JPG images. If the SVG only has a viewBox and no width or height, certain themes may not know how large to display it and the logo area collapses to nothing.
How to Fix It
To fix this issue you’ll need to add width and height attributes to the SVG file. You can do this using a vector editor such as Figma, Adobe Illustrator, Inkscape, or any plain text editor:
- Open the SVG file in a tool like Figma (Figma lets you inspect the SVG and export it with dimensions).
- Make sure the document or artboard is sized to your desired default logo size.
- Export the SVG, ensuring width and height attributes are included in the <svg> tag, for example:
<svg width=”200″ height=”60″ viewBox=”0 0 200 60″ xmlns=”http://www.w3.org/2000/svg”>
Save and re-upload the updated SVG to WordPress.
Adding these dimensions tells the browser exactly how large to render the logo, preventing it from collapsing to 0×0 and making your SVG logo appear consistently.
Increase Logo Size with Custom Css
Change logo height by using this Custom CSS:
.logo img {
max-height: 54px;
}
Change 54 to your value.
This change will affect the sticky menu logo size. If you wish to have different sizes, edit this css in Custom CSS
.customnav .logo img {
max-height: 65px!important;
}
Make sure that you add correctly the retina logos version. Help article about how add logos and their retina version correctly
