1. Home
  2. Docs
  3. Customizing the Theme
  4. Header Settings
  5. Logo


Accessed in Appearance → Customize → Header Settings → Logo.

General info

Here you upload a logo for your site or use text one.

It is important to have a logo for branding purposes and to keep navigation intuitive, where clicking at the logo brings your user to the home page.

In horizontal header logo is responsible for the height of the header, so you can use its top & bottom padding settings to adjust theme header height(except when using shield logo, read below).

Image logo

Uploaded logo will be resized by CSS to fit layout in some cases.

You also have field Image for HIGH DPI screen to upload a bigger logo for retina like devices. Use there bigger size image but in the same proportions as the normal logo.

Thanks to that it looks good, on both Retina and traditional screen.

Changing logo in header color variants

If you are using header color variants, but don’t want to use different logo image for each variant you can disable this option Use logos from header variants.

If you have imported one of our designs there is a chance it uses header color variants feature. So if you want to keep it active but want to have the same logo everywhere you can use above solution or just go to ooverrides settings and remove images set for the logo. Same for sticky header overrides.

SVG Logo

Read about using the SVG logo in the theme.

Text logo

If you use text logo and it has more then one word, then instead of white space you might want to use unbreakable one. It is helpful when the logo is displayed on smaller screens or your header is crowded.

To do it insert   instead of white space so your text in the logo will look like This is MySite!

After saving of changes you will not see these  in input but don’t worry, they are still there:-)

Using shield logo

If you are using the horizontal header with variant One line, logo centered you will get extra options for shield logo. Example.

To activate it go to Appearance → Customize → Header Settings → Logo → Use shield for logo.

You can then choose a shield color and percent of logo that should fold up in various scenarios. Adjust these values to make your logo look good and not cover too much content. Percent values are based on header heigh not the shield height. It means that in some cases you may need to use values higher than 100% to achieve the desired result.

To position logo in shield use its top & bottom padding settings, as when using shield logo, padding of logo no longer defines header height.

Was this article helpful to you? No Yes

How can we help?