{"id":6118,"date":"2022-10-06T14:30:14","date_gmt":"2022-10-06T11:30:14","guid":{"rendered":"https:\/\/creativethemes.com\/blocksy\/?post_type=documentation&p=6118"},"modified":"2026-10-08T10:51:04","modified_gmt":"2026-10-08T07:51:04","slug":"logo","status":"publish","type":"documentation","link":"https:\/\/creativethemes.com\/blocksy\/docs\/header-elements\/logo\/","title":{"rendered":"Logo"},"content":{"rendered":"\n
\n
\"Logo\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button>
The Logo element in action.<\/figcaption><\/figure>\n\n\n\n

The Logo<\/strong> element represents your website’s identity inside the header. It can display an image logo, your Site Title and Site Tagline, or a combination of these, with responsive controls and support for different header states.<\/p>\n\n\n\n

The Logo element is always available in Blocksy’s Header Builder. To configure it, open the Customiser \u2192 Header<\/strong> and select the Logo<\/strong> element from the header layout.<\/p>\n<\/div>\n\n\n\n

\n

Granular Controls<\/h2>\n\n\n\n
\n
\n
\"Configuration\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button>
Logo element configuration options.<\/figcaption><\/figure>\n<\/div>\n\n\n\n
\n

Logo<\/h3>\n\n\n\n

Select the image used as your website’s primary logo. Separate logo images can be configured for desktop and mobile layouts, allowing you to adapt your branding to the available space on different devices.<\/p>\n\n\n\n

Additional logo selections become available when supported header features are active. For example, you can provide dedicated images for the Transparent Header<\/a><\/strong> and Sticky Header<\/a><\/strong> states.<\/p>\n\n\n\n

If the Color Mode Switch<\/a><\/strong> extension is active, you can also provide a dedicated logo for the alternate Color mode.<\/p>\n\n\n\n

Logo Height<\/h3>\n\n\n\n

Use Logo Height<\/strong> to control the displayed dimensions of the image logo. Responsive controls let you adapt its size to the available header space on different devices.<\/p>\n\n\n\n

Sticky State Shrink<\/h3>\n\n\n\n

When the Sticky Header is active, enable Sticky State Shrink<\/strong> to reduce the logo’s size when the header enters its sticky state. This can be combined with the corresponding header-row controls to create a more compact sticky header.<\/p>\n\n\n\n

Site Title<\/h3>\n\n\n\n

Enable the Site Title<\/strong> to display your WordPress site name alongside or instead of an image logo. Its visibility can be controlled independently across the available responsive device views.<\/p>\n\n\n\n

The Site Title Link<\/strong> option determines whether the title links back to the website’s homepage.<\/p>\n\n\n\n

Site Tagline<\/h3>\n\n\n\n

Enable the Site Tagline<\/strong> to display the tagline configured for your WordPress website. Like the Site Title, it includes responsive visibility controls so it can be shown only on the devices where it fits your header layout.<\/p>\n\n\n\n

Logo Image Link<\/h3>\n\n\n\n

Use Logo Image Link<\/strong> to control whether the image logo links back to the website’s homepage. Disable it when the logo should be displayed without functioning as a navigation link.<\/p>\n\n\n\n

Logo Inline SVG File<\/h3>\n\n\n\n

When an SVG file is used as the logo, the Logo Inline SVG File<\/strong> option lets Blocksy output the SVG markup directly in the page instead of loading it as a regular image file.<\/p>\n\n\n\n

\n

Experimental feature<\/strong>
Inline SVG output is experimental. For the most reliable results, make sure the SVG file is properly prepared and flattened before uploading it as your logo.<\/p>\n<\/div>\n\n\n\n

Positioning & Alignment<\/h3>\n\n\n\n

Additional positioning and alignment controls become available when the Site Title<\/strong> or Site Tagline<\/strong> is enabled. Use them to control how the image logo and text content are arranged and aligned within the element.<\/p>\n\n\n\n

CSS Class<\/h3>\n\n\n\n

Add a custom CSS class to the Logo element when you need an additional selector for custom styling or integrations.<\/p>\n\n\n\n

Custom ARIA Label<\/h3>\n\n\n\n

Provide a custom ARIA label for the Logo element when its purpose is not sufficiently clear to users of assistive technologies. This can be used to give the logo link a more descriptive accessible name.<\/p>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

The Logo element represents your website’s identity inside the header. It can display an image logo, your Site Title and Site Tagline, or a combination of these, with responsive controls and support for different header states. The Logo element is always available in Blocksy’s Header Builder. To configure it, open the Customiser \u2192 Header and […]<\/p>\n","protected":false},"author":1,"featured_media":6134,"comment_status":"open","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"doc_categories":[124],"class_list":["post-6118","documentation","type-documentation","status-publish","has-post-thumbnail","hentry","doc_categories-header-elements"],"acf":[],"_links":{"self":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation\/6118","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation"}],"about":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/types\/documentation"}],"author":[{"embeddable":true,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/comments?post=6118"}],"version-history":[{"count":5,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation\/6118\/revisions"}],"predecessor-version":[{"id":15265,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation\/6118\/revisions\/15265"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/media\/6134"}],"wp:attachment":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/media?parent=6118"}],"wp:term":[{"taxonomy":"doc_categories","embeddable":true,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/doc_categories?post=6118"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}