Customizing The Logo

Total includes some built-in options not only to alter the default look of the text logo, but also to upload your own custom image logo and retina image logo if needed.

To alter your default logo go to Appearance > Customize > Header > Logo (but note that you can also alter the logo on a per-page basis using the page settings which may be worth checking if you imported a demo as the demo may be using the Overlay Header style with a custom logo).

Customizing The Text Logo

If you don’t want to use a custom image logo you can also tweak the default text logo by changing the color, size, etc.

Adding An Icon To Your Logo

You can easily add an icon to your text logo which may look really cool depending on your website. Within the “Styling” tab for the header section you will also find the options to alter the right margin for the icon and the color.

Altering The Logo Colors

Located in the same “Header” panel under the Logo tag you can choose different colors for your text logo.

Altering The Logo Typography

To alter your logo font family, size, letter spacing…etc. You will do so at Appearance > Customize > Typography > Logo. See below:

logo-typography

Adding A Custom Image Logo

Simply use the “Image Logo” field to upload or drag and drop your custom image logo. This logo can be in any format (png or jpg is best) and any size.

Logo Height

Unlike other themes in Total your logo doesn’t have a size restriction allowing you to upload any logo image you want and display it in full. However sometimes you may want to upload a large logo and display it at a smaller size you can easily do that via the built-in height settings.

Note: While it’s not required it’s best to enter a height in pixels (define the px in the field) and then check the box to “Apply Height” so it’s applied to the logo (the height by default is used only for retina and the image height attribute).

Logo Max-Width

If your logo is really large and so is your menu it might overlap each other if you are using Header Style 1. Use the “Logo Max Width” option to limit the width of your custom image logo and prevent any overlapping. Using the “Height” setting along with the “Apply Height” checkbox can also work for this, no need to do both.

logo-max-width

Retina Image Logo

Total includes an option where you can also upload a custom image logo for retina devices.

Important: Make sure to enter a value for the “Standard Retina Logo Height” field, otherwise your retina logo will display at it’s full size and not the correct size for retina display. This value should be equal to the height of the standard logo image.
  • Last updated on
Back To Top