The Logo element is the centerpiece of your site’s 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’s header builder and gives you full flexibility for displaying your site’s identity across devices and header states.
Granular Controls
Logo
You can upload different logos for desktop and mobile views, making sure your design looks great everywhere. In combination with Blocksy’s transparent and sticky header effects, you also get per-state controls, allowing you to define unique logos for the default, sticky, and transparent header states.
If the Colour Mode Switcher extension is enabled, you’ll also see an additional option for a dedicated Dark Mode logo.
Logo Height
The Logo Height control adjusts the displayed size of your logo.
Sticky State Shrink
When the header enters its sticky state, you can optionally shrink the logo (and header row) for a smoother, more compact transition.
Site Title
For a minimalist approach, you can display your site’s name as plain text instead of an image logo.
- The Site Title Link option allows you to remove the default link applied to the title.
- Per-device controls let you show it only on selected devices.
Site Tagline
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.
Logo Controls
- Logo Image Link – lets you remove the link normally applied to the logo image.
- Logo Inline SVG File – converts your uploaded .SVG into inline code, useful for optimisation scenarios. (Note: This feature is experimental. Ensure your SVG is flattened for best compatibility.)
Positioning & Alignment
These contextual options appear when the site title or tagline is enabled. They let you fine-tune the alignment of the logo element’s content based on your layout.
CSS Class
Add a custom CSS class to the logo element for extra styling flexibility.
Custom ARIA Label
Here you can define a custom ARIA label, ensuring the logo element meets accessibility needs.