{"id":8738,"date":"2018-01-10T09:37:42","date_gmt":"2018-01-10T09:37:42","guid":{"rendered":"http:\/\/rifetheme.com\/help\/docs\/customizing-the-theme\/header\/logo\/"},"modified":"2020-08-17T05:36:51","modified_gmt":"2020-08-17T05:36:51","slug":"logo","status":"publish","type":"docs","link":"https:\/\/rifetheme.com\/apollo13-framework\/docs\/customizing-the-theme\/header\/logo\/","title":{"rendered":"Logo"},"content":{"rendered":"

Accessed in Appearance \u2192 Customize \u2192 Header Settings \u2192 Logo.<\/strong><\/p>\n

General info<\/h2>\n

Here you upload a logo for your site or use text one.<\/p>\n

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.<\/p>\n

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

Image logo<\/h2>\n

Uploaded logo will be resized by CSS to fit layout in some cases.<\/p>\n

You also have field\u00a0Image for HIGH DPI screen<\/strong> to upload a bigger logo for retina like devices. Use there bigger size image but in the same proportions as the normal logo.<\/p>\n

Thanks to that it looks good, on both Retina and traditional screen.<\/p>\n

Changing logo in header color variants<\/h3>\n

If you are using header color variants<\/a>, but don’t want to use different logo image for each variant you can disable this option Use logos from header variants<\/strong>.<\/p>\n

If you have imported one of our designs<\/a> there is a chance it uses header color variants<\/a> 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<\/a> settings and remove images set for the logo. Same for sticky header overrides<\/a>.<\/p>\n

SVG Logo<\/h3>\n

Read about using the SVG logo in the theme.<\/a><\/p>\n

Text logo<\/h2>\n

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.<\/p>\n

To do it insert &nbsp;<\/code> instead of white space so your text in the logo will look like This&nbsp;is&nbsp;MySite!<\/code><\/p>\n

After saving of changes you will not see these &nbsp;<\/code>in input but don’t worry, they are still there:-)<\/p>\n

Using shield logo<\/h2>\n

If you are using the horizontal header<\/strong> with variant One line, logo centered<\/strong> you will get extra options for shield logo<\/strong>. Example<\/a>.<\/p>\n

To activate it go to Appearance \u2192 Customize \u2192 Header Settings \u2192 Logo \u2192 Use shield for logo<\/strong>.<\/p>\n

You can then choose a shield color<\/strong> and percent of logo that should fold up<\/strong> 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<\/strong> not the shield height. It means that in some cases you may need to use values higher than 100% to achieve the desired result.<\/p>\n

To position logo in shield use its top & bottom padding<\/strong> settings, as when using shield logo, padding of logo no longer defines header height.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":39,"menu_order":1,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"doc_tag":[],"class_list":["post-8738","docs","type-docs","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/rifetheme.com\/apollo13-framework\/wp-json\/wp\/v2\/docs\/8738","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rifetheme.com\/apollo13-framework\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/rifetheme.com\/apollo13-framework\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/rifetheme.com\/apollo13-framework\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rifetheme.com\/apollo13-framework\/wp-json\/wp\/v2\/comments?post=8738"}],"version-history":[{"count":4,"href":"https:\/\/rifetheme.com\/apollo13-framework\/wp-json\/wp\/v2\/docs\/8738\/revisions"}],"predecessor-version":[{"id":9153,"href":"https:\/\/rifetheme.com\/apollo13-framework\/wp-json\/wp\/v2\/docs\/8738\/revisions\/9153"}],"up":[{"embeddable":true,"href":"https:\/\/rifetheme.com\/apollo13-framework\/wp-json\/wp\/v2\/docs\/39"}],"next":[{"title":"SVG logo","link":"https:\/\/rifetheme.com\/apollo13-framework\/docs\/customizing-the-theme\/header\/svg-logo\/","href":"https:\/\/rifetheme.com\/apollo13-framework\/wp-json\/wp\/v2\/docs\/9114"}],"prev":[{"title":"Type, variant, background","link":"https:\/\/rifetheme.com\/apollo13-framework\/docs\/customizing-the-theme\/header\/type-variant-background\/","href":"https:\/\/rifetheme.com\/apollo13-framework\/wp-json\/wp\/v2\/docs\/8737"}],"wp:attachment":[{"href":"https:\/\/rifetheme.com\/apollo13-framework\/wp-json\/wp\/v2\/media?parent=8738"}],"wp:term":[{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/rifetheme.com\/apollo13-framework\/wp-json\/wp\/v2\/doc_tag?post=8738"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}