{"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":"2025-08-27T20:27:15","modified_gmt":"2025-08-27T17:27:15","slug":"logo","status":"publish","type":"documentation","link":"https:\/\/creativethemes.com\/blocksy\/docs\/header-elements\/logo\/","title":{"rendered":"Logo"},"content":{"rendered":"\n
\"\"\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button>
The
Logo <\/strong>element in action<\/figcaption><\/figure>\n\n\n\n

The\u00a0Logo element<\/strong>\u00a0is the centerpiece of your site\u2019s identity. It allows you to display an image, text, or both, and provides flexible options for different devices, header states, and design preferences.<\/p>\n\n\n\n

It is always available in Blocksy\u2019s header builder and gives you full flexibility for displaying your site\u2019s identity across devices and header states.<\/p>\n\n\n\n

Granular Controls<\/h2>\n\n\n\n
\n
\n
\"\"<\/figure>\n<\/div>\n\n\n\n
\n

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

You can upload different logos for desktop and mobile views, making sure your design looks great everywhere. In combination with Blocksy\u2019s\u00a0transparent<\/a><\/strong>\u00a0and\u00a0sticky<\/a><\/strong>\u00a0header effects, you also get per-state controls, allowing you to define unique logos for the\u00a0default<\/strong>,\u00a0sticky<\/strong>, and\u00a0transparent<\/strong>\u00a0header states.<\/p>\n\n\n\n

If the\u00a0Colour Mode Switcher<\/a><\/strong>\u00a0extension is enabled, you\u2019ll also see an additional option for a dedicated\u00a0Dark Mode logo<\/strong>.<\/p>\n\n\n\n

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

The\u00a0Logo Height<\/strong>\u00a0control adjusts the displayed size of your logo.<\/p>\n\n\n\n

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

When the header enters its sticky state, you can optionally shrink the logo (and header row) for a smoother, more compact transition.<\/p>\n\n\n\n

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

For a minimalist approach, you can display your site\u2019s name as plain text instead of an image logo.<\/p>\n\n\n\n

    \n
  • The\u00a0Site Title Link<\/strong>\u00a0option allows you to remove the default link applied to the title.<\/li>\n\n\n\n
  • Per-device controls let you show it only on selected devices.<\/li>\n<\/ul>\n\n\n\n

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

    You can also display a short tagline, acting like a motto or description for your brand. Just like the site title, the tagline includes per-device visibility controls.<\/p>\n\n\n\n

    Logo Controls<\/h3>\n\n\n\n
      \n
    • Logo Image Link<\/strong>\u00a0\u2013 lets you remove the link normally applied to the logo image.<\/li>\n\n\n\n
    • Logo Inline SVG File<\/strong>\u00a0\u2013 converts your uploaded\u00a0.SVG<\/strong>\u00a0into inline code, useful for optimisation scenarios.\u00a0(Note: This feature is experimental. Ensure your SVG is flattened for best compatibility.)<\/em><\/li>\n<\/ul>\n\n\n\n

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

      These contextual options appear when the site title or tagline is enabled. They let you fine-tune the alignment of the logo element\u2019s content based on your layout.<\/p>\n\n\n\n

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

      Add a custom CSS class to the logo element for extra styling flexibility.<\/p>\n\n\n\n

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

      Here you can define a custom ARIA label, ensuring the logo element meets accessibility needs.<\/p>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

      The\u00a0Logo element\u00a0is the centerpiece of your site\u2019s identity. It allows you to display an image, text, or both, and provides flexible options for different devices, header states, and design preferences. It is always available in Blocksy\u2019s header builder and gives you full flexibility for displaying your site\u2019s identity across devices and header states. Granular Controls […]<\/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"],"blocksy_meta":{"styles_descriptor":{"styles":{"desktop":"","tablet":"","mobile":""},"google_fonts":[],"version":6}},"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":4,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation\/6118\/revisions"}],"predecessor-version":[{"id":13952,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation\/6118\/revisions\/13952"}],"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}]}}