Documentation
Docs

Sticky

ska-theme includes an Alpine.js component for creating a sticky header.

For creating a sticky header, add the x-data="skaSticky" attribute to the element that should stick. That element will receive the .is-sticky class when it is sticky.

Module argumentsTypeScript
interface StickyConfig {
	/** Offset from the top when the element should become sticky. */
	offset?: number
	/** Add min-height style to produce a smooth height change. */
	smoothHeight?: boolean
}

Arguments can be specified like this: x-data="skaSticky({offset: 128})".

When making a sticky header, it’s a good idea to give it a fixed height and wrap it in an element that has the same height. For example a wrapper element for a header with 4rem height can use Tailwind classes [--h:theme(spacing[16])] h-[--h] *:h-[--h]. Now changing the --h variable will change both the wrapper and the header height.

The sticky header should have Tailwind classes for when the .is-sticky class is added to the element, such as:

/** When using [&.is-sticky]: selector */
fixed top-[--ska-wp-admin-bar-height] right-0 left-0 min-h-[--sticky-min-h]
/** Without using a selector. */
[&.is-sticky]:fixed [&.is-sticky]:top-[--ska-wp-admin-bar-height] [&.is-sticky]:right-0 [&.is-sticky]:left-0 [&.is-sticky]:min-h-[--sticky-min-h]

but appearance styles can be changed as well, such as:

shadow-lg backdrop-blur-sm

To change any element deeper in the header based on the header’s “sticky” state, this variant can be used:

[.is-sticky_&]

Default sticky header

<!-- wp:ska/element {"metadata":{"name":"Header wrapper"},"skaBlocksHeight":{"v":{"$":{"@":"[\u002d\u002dh]"},"*":{"@":"[\u002d\u002dh]"}},"a":["[\u002d\u002dh]"]},"skaBlocksBackgroundColor":{"v":{"$":{"@":"neutral-50/95"}}},"skaBlocksAttributes":{"record":[]},"skaBlocks":{"cx":"[\u002d\u002dh:theme(spacing[16])] h-[\u002d\u002dh] *:h-[\u002d\u002dh] bg-neutral-50/95","t":1709756495,"css":".h-\\[\u002d\u002dh\\]{height:var(\u002d\u002dh)}.bg-neutral-50\\/95{background-color:rgba(250,250,250,0.95)}.\\[\u002d\u002dh\\:theme\\(spacing\\[16\\]\\)\\]{\u002d\u002dh:var(\u002d\u002dska-spacing-16)}.\\*\\:h-\\[\u002d\u002dh\\] \u003e *{height:var(\u002d\u002dh)}"},"skaBlocksVariables":{"record":{"\u002d\u002dh":{"value":"theme(spacing[16])","type":"spacing"}}}} -->
<div class="[--h:theme(spacing[16])] h-[--h] *:h-[--h] bg-neutral-50/95 wp-block-ska-element"><!-- wp:ska/element {"metadata":{"name":"Header"},"skaBlocksDisplay":{"v":{"$":{"@":"flex"}}},"skaBlocksZIndex":{"v":{"$":{"@":"30"}}},"skaBlocksJustifyContent":{"v":{"$":{"@":"center"}}},"skaBlocksAlignItems":{"v":{"$":{"@":"center"}}},"skaBlocksBackgroundColor":{"v":{"$":{"@":"inherit"}}},"skaBlocksAs":{"element":"div"},"skaBlocksAttributes":{"record":{"x-data":"skaSticky"}},"skaBlocks":{"cx":"flex [\u0026.is-sticky]:fixed [\u0026.is-sticky]:top-[calc(var(\u002d\u002dska-wp-admin-bar-height)_+_56px)] [\u0026.is-sticky]:right-0 [\u0026.is-sticky]:left-0 z-30 justify-center items-center [\u0026.is-sticky]:min-h-[\u002d\u002dsticky-min-h] bg-inherit [\u0026.is-sticky]:shadow-lg [\u0026.is-sticky]:shadow-black/5 [\u0026.is-sticky]:backdrop-blur-sm","t":1709756495,"css":".z-30{z-index:30}.flex{display:flex}.items-center{align-items:center}.justify-center{justify-content:center}.bg-inherit{background-color:inherit}.\\[\\\u0026\\.is-sticky\\]\\:fixed.is-sticky{position:fixed}.\\[\\\u0026\\.is-sticky\\]\\:left-0.is-sticky{left:var(\u002d\u002dska-spacing-0)}.\\[\\\u0026\\.is-sticky\\]\\:right-0.is-sticky{right:var(\u002d\u002dska-spacing-0)}.\\[\\\u0026\\.is-sticky\\]\\:top-\\[calc\\(var\\(\u002d\u002dska-wp-admin-bar-height\\)_\\+_56px\\)\\].is-sticky{top:calc(var(\u002d\u002dska-wp-admin-bar-height) + 56px)}.\\[\\\u0026\\.is-sticky\\]\\:min-h-\\[\u002d\u002dsticky-min-h\\].is-sticky{min-height:var(\u002d\u002dsticky-min-h)}.\\[\\\u0026\\.is-sticky\\]\\:shadow-lg.is-sticky{\u002d\u002dtw-shadow:0 10px 15px -3px rgb(0 0 0/0.1),0 4px 6px -4px rgb(0 0 0/0.1);\u002d\u002dtw-shadow-colored:0 10px 15px -3px var(\u002d\u002dtw-shadow-color),0 4px 6px -4px var(\u002d\u002dtw-shadow-color);box-shadow:var(\u002d\u002dtw-ring-offset-shadow,0 0 #0000),var(\u002d\u002dtw-ring-shadow,0 0 #0000),var(\u002d\u002dtw-shadow)}.\\[\\\u0026\\.is-sticky\\]\\:shadow-black\\/5.is-sticky{\u002d\u002dtw-shadow-color:rgba(var(\u002d\u002dska-rgb-black),0.05);\u002d\u002dtw-shadow:var(\u002d\u002dtw-shadow-colored)}.\\[\\\u0026\\.is-sticky\\]\\:backdrop-blur-sm.is-sticky{\u002d\u002dtw-backdrop-blur:blur(4px);-webkit-backdrop-filter:var(\u002d\u002dtw-backdrop-blur) var(\u002d\u002dtw-backdrop-brightness) var(\u002d\u002dtw-backdrop-contrast) var(\u002d\u002dtw-backdrop-grayscale) var(\u002d\u002dtw-backdrop-hue-rotate) var(\u002d\u002dtw-backdrop-invert) var(\u002d\u002dtw-backdrop-opacity) var(\u002d\u002dtw-backdrop-saturate) var(\u002d\u002dtw-backdrop-sepia);backdrop-filter:var(\u002d\u002dtw-backdrop-blur) var(\u002d\u002dtw-backdrop-brightness) var(\u002d\u002dtw-backdrop-contrast) var(\u002d\u002dtw-backdrop-grayscale) var(\u002d\u002dtw-backdrop-hue-rotate) var(\u002d\u002dtw-backdrop-invert) var(\u002d\u002dtw-backdrop-opacity) var(\u002d\u002dtw-backdrop-saturate) var(\u002d\u002dtw-backdrop-sepia)}"},"skaBlocksVariables":{"record":[]},"skaBlocksSelectors":{"[\u0026.is-sticky]":{"skaBlocksTopRightBottomLeft":{"v":{"$":{"@":"","t":"[calc(var(\u002d\u002dska-wp-admin-bar-height)_+_56px)]","r":"0","l":"0"}},"a":["[calc(var(\u002d\u002dska-wp-admin-bar-height)_+_56px)]"]},"skaBlocksPosition":{"v":{"$":{"@":"fixed"}}},"skaBlocksBoxShadow":{"v":{"$":{"@":"lg"}}},"skaBlocksBoxShadowColor":{"v":{"$":{"@":"black/5"}}},"skaBlocksBackdropBlur":{"v":{"$":{"@":"sm"}}},"skaBlocksSelectors":[],"skaBlocksMinHeight":{"v":{"$":{"@":"[\u002d\u002dsticky-min-h]"}},"a":["[\u002d\u002dsticky-min-h]"]}}}} -->
<div x-data="skaSticky" class="flex [&.is-sticky]:fixed [&.is-sticky]:top-[calc(var(--ska-wp-admin-bar-height)_+_56px)] [&.is-sticky]:right-0 [&.is-sticky]:left-0 z-30 justify-center items-center [&.is-sticky]:min-h-[--sticky-min-h] bg-inherit [&.is-sticky]:shadow-lg [&.is-sticky]:shadow-black/5 [&.is-sticky]:backdrop-blur-sm wp-block-ska-element"><!-- wp:ska/element {"skaBlocksWidth":{"v":{"$":{"@":"full"}}},"skaBlocksAs":{"customElement":"nav","element":"custom"},"skaBlocks":{"cx":"w-full","t":1709756495,"css":".w-full{width:100%}"}} -->
<nav class="w-full wp-block-ska-element"><!-- wp:ska/element {"skaBlocksDisplay":{"v":{"$":{"@":"flex"}}},"skaBlocksFlexDirection":{"v":{"$":{"@":"row"}}},"skaBlocksGap":{"v":{"$":{"@":"4"}}},"skaBlocksJustifyContent":{"v":{"$":{"@":"between"}}},"skaBlocksAlignItems":{"v":{"$":{"@":"center"}}},"skaBlocks":{"p":[{"id":"ska-theme:container","isStatic":true}],"cx":"flex flex-row gap-4 justify-between items-center","t":1709756495,"css":".flex{display:flex}.flex-row{flex-direction:row}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-4{gap:var(\u002d\u002dska-spacing-4)}"},"skaBlocksVariation":"ska-theme:container"} -->
<div class="flex flex-row gap-4 justify-between items-center wp-block-ska-element"><!-- wp:ska/element {"metadata":{"name":"Brand"},"skaBlocksDisplay":{"v":{"$":{"@":"flex"}}},"skaBlocksGap":{"v":{"$":{"@":"2.5"}}},"skaBlocksAlignItems":{"v":{"$":{"@":"center"}}},"skaBlocksMinWidth":{"v":{"$":{"@":"max"}}},"skaBlocksAs":{"element":"div","href":"","opensInNewTab":false},"skaBlocks":{"cx":"flex gap-2.5 items-center min-w-max","t":1709756495,"css":".flex{display:flex}.min-w-max{min-width:-moz-max-content;min-width:max-content}.items-center{align-items:center}.gap-2{gap:var(\u002d\u002dska-spacing-2)}.gap-2\\.5{gap:var(\u002d\u002dska-spacing-2\\.5)}"}} -->
<div class="flex gap-2.5 items-center min-w-max wp-block-ska-element"><!-- wp:site-title {"level":0,"skaBlocks":{"cx":"text-xl font-semibold whitespace-nowrap","t":1709756495,"css":".whitespace-nowrap{white-space:nowrap}.text-xl{font-size:var(\u002d\u002dska-font-size-xl);line-height:var(\u002d\u002dska-font-size-xl-lh)}.font-semibold{font-weight:var(\u002d\u002dska-font-weight-semibold)}"},"skaBlocksFontSize":{"v":{"$":{"@":"xl"}}},"skaBlocksFontWeight":{"v":{"$":{"@":"semibold"}}},"skaBlocksWhitespace":{"v":{"$":{"@":"nowrap"}}}} /--></div>
<!-- /wp:ska/element -->

<!-- wp:ska/element {"skaBlocksDisplay":{"v":{"$":{"@":"flex"}}},"skaBlocksFlexDirection":{"v":{"$":{"@":"row"}}},"skaBlocksGap":{"v":{"$":{"@":"[inherit]"}},"a":["[inherit]"]},"skaBlocksJustifyContent":{"v":{"$":{"@":"between"}}},"skaBlocksAlignItems":{"v":{"$":{"@":"center"}}},"skaBlocks":{"cx":"flex flex-row gap-[inherit] justify-between items-center","t":1709756495,"css":".flex{display:flex}.flex-row{flex-direction:row}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-\\[inherit\\]{gap:inherit}"}} -->
<div class="flex flex-row gap-[inherit] justify-between items-center wp-block-ska-element"><!-- wp:ska/menu {"dropdown":"hover","metadata":{"name":"Primary menu"},"skaBlocks":{"cx":"hidden [@media(min-width:840px)]:flex [\u0026\u003eli\u003e*:not(ul)]:flex flex-row [\u0026\u003eli\u003e*:not(ul)]:flex-row gap-3.5 [\u0026\u003eli\u003e*:not(ul)]:gap-px [\u0026\u003eli\u003e*:not(ul)]:items-center ml-auto text-base font-medium [\u0026\u003eli\u003e*:not(ul)]:text-site hover:[\u0026\u003eli\u003e*:not(ul)]:text-link [\u0026.active]:[\u0026\u003eli\u003e*:not(ul)]:text-link-active [\u0026.active]:[\u0026\u003eli\u003e*:not(ul)]:underline [\u0026\u003eli\u003e*:not(ul)]:decoration-primary [\u0026\u003eli\u003e*:not(ul)]:decoration-2 [\u0026\u003eli\u003e*:not(ul)]:underline-offset-2 [\u0026\u003eli\u003e*:not(ul)]:whitespace-nowrap [\u0026\u003eli\u003e*:not(ul)]:transition-colors","t":1709756495,"css":".ml-auto{margin-left:auto}.hidden{display:none}.flex-row{flex-direction:row}.gap-3{gap:var(\u002d\u002dska-spacing-3)}.gap-3\\.5{gap:var(\u002d\u002dska-spacing-3\\.5)}.text-base{font-size:var(\u002d\u002dska-font-size-base);line-height:var(\u002d\u002dska-font-size-base-lh)}.font-medium{font-weight:var(\u002d\u002dska-font-weight-medium)}.\\[\\\u0026\\\u003eli\\\u003e\\*\\:not\\(ul\\)\\]\\:flex\u003eli\u003e*:not(ul){display:flex}.\\[\\\u0026\\\u003eli\\\u003e\\*\\:not\\(ul\\)\\]\\:flex-row\u003eli\u003e*:not(ul){flex-direction:row}.\\[\\\u0026\\\u003eli\\\u003e\\*\\:not\\(ul\\)\\]\\:items-center\u003eli\u003e*:not(ul){align-items:center}.\\[\\\u0026\\\u003eli\\\u003e\\*\\:not\\(ul\\)\\]\\:gap-px\u003eli\u003e*:not(ul){gap:var(\u002d\u002dska-spacing-px)}.\\[\\\u0026\\\u003eli\\\u003e\\*\\:not\\(ul\\)\\]\\:whitespace-nowrap\u003eli\u003e*:not(ul){white-space:nowrap}.\\[\\\u0026\\\u003eli\\\u003e\\*\\:not\\(ul\\)\\]\\:text-site\u003eli\u003e*:not(ul){\u002d\u002dtw-text-opacity:1;color:rgba(var(\u002d\u002dska-rgb-site),0.87)}.\\[\\\u0026\\\u003eli\\\u003e\\*\\:not\\(ul\\)\\]\\:decoration-primary\u003eli\u003e*:not(ul){text-decoration-color:rgba(var(\u002d\u002dska-rgb-primary),1)}.\\[\\\u0026\\\u003eli\\\u003e\\*\\:not\\(ul\\)\\]\\:decoration-2\u003eli\u003e*:not(ul){text-decoration-thickness:2px}.\\[\\\u0026\\\u003eli\\\u003e\\*\\:not\\(ul\\)\\]\\:underline-offset-2\u003eli\u003e*:not(ul){text-underline-offset:2px}.\\[\\\u0026\\\u003eli\\\u003e\\*\\:not\\(ul\\)\\]\\:transition-colors\u003eli\u003e*:not(ul){transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(0.4,0,0.2,1);transition-duration:150ms}.hover\\:\\[\\\u0026\\\u003eli\\\u003e\\*\\:not\\(ul\\)\\]\\:text-link\u003eli\u003e*:not(ul):hover{\u002d\u002dtw-text-opacity:1;color:rgba(var(\u002d\u002dska-rgb-link),1)}.\\[\\\u0026\\.active\\]\\:\\[\\\u0026\\\u003eli\\\u003e\\*\\:not\\(ul\\)\\]\\:text-link-active\u003eli\u003e*:not(ul).active{\u002d\u002dtw-text-opacity:1;color:rgba(var(\u002d\u002dska-rgb-link-active),1)}.\\[\\\u0026\\.active\\]\\:\\[\\\u0026\\\u003eli\\\u003e\\*\\:not\\(ul\\)\\]\\:underline\u003eli\u003e*:not(ul).active{text-decoration-line:underline}@media(min-width:840px){.\\[\\@media\\(min-width\\:840px\\)\\]\\:flex{display:flex}}"},"skaBlocksSelectors":{"[\u0026\u003eli\u003e*:not(ul)]":{"skaBlocksDisplay":{"v":{"$":{"@":"flex"}}},"skaBlocksFlexDirection":{"v":{"$":{"@":"row"}}},"skaBlocksAlignItems":{"v":{"$":{"@":"center"}}},"skaBlocksGap":{"v":{"$":{"@":"px"}}},"skaBlocksTextColor":{"v":{"$":{"@":"site"},"hover":{"@":"link"},"[\u0026.active]":{"@":"link-active"}}},"skaBlocksTextDecoration":{"v":{"$":{"@":""},"[\u0026.active]":{"@":"underline"}}},"skaBlocksTextDecorationColor":{"v":{"$":{"@":"primary"}}},"skaBlocksTextDecorationThickness":{"v":{"$":{"@":"2"}}},"skaBlocksTextUnderlineOffset":{"v":{"$":{"@":"2"}}},"skaBlocksTransitionProperty":{"v":{"$":{"@":"colors"}}},"skaBlocksWhitespace":{"v":{"$":{"@":"nowrap"}}}}},"skaBlocksDisplay":{"v":{"$":{"@":"hidden"},"[@media(min-width:840px)]":{"@":"flex"}}},"skaBlocksFlexDirection":{"v":{"$":{"@":"row"}}},"skaBlocksGap":{"v":{"$":{"@":"3.5"}}},"skaBlocksMargin":{"v":{"$":{"@":"","l":"auto"}},"t":"sides"},"skaBlocksFontSize":{"v":{"$":{"@":"base"}}},"skaBlocksFontWeight":{"v":{"$":{"@":"medium"}}}} /-->

<!-- wp:ska/element {"metadata":{"name":"Search button"},"skaBlocksAs":{"element":"custom","customElement":"button"},"skaBlocksAttributes":{"record":{"x-data":"","x-on:click.capture":"$store.skaSearch.show()","aria-label":"{{Search…}}"}},"skaBlocks":{"cx":"","t":1706889103,"css":""}} -->
<button x-data="" x-on:click.capture="$store.skaSearch.show()" aria-label="{{Search…}}" class="wp-block-ska-element"><!-- wp:ska/image {"mode":"svg","svg":"\u003csvg viewBox=\u00220 0 24 24\u0022 fill=\u0022none\u0022 xmlns=\u0022http://www.w3.org/2000/svg\u0022\u003e\n\t\u003cpath fill-rule=\u0022evenodd\u0022 clip-rule=\u0022evenodd\u0022 d=\u0022M10.5 3.75C6.77208 3.75 3.75 6.77208 3.75 10.5C3.75 14.2279 6.77208 17.25 10.5 17.25C12.3642 17.25 14.0506 16.4953 15.273 15.273C16.4953 14.0506 17.25 12.3642 17.25 10.5C17.25 6.77208 14.2279 3.75 10.5 3.75ZM2.25 10.5C2.25 5.94365 5.94365 2.25 10.5 2.25C15.0563 2.25 18.75 5.94365 18.75 10.5C18.75 12.5078 18.032 14.3491 16.8399 15.7793L21.5303 20.4697C21.8232 20.7626 21.8232 21.2374 21.5303 21.5303C21.2374 21.8232 20.7626 21.8232 20.4697 21.5303L15.7793 16.8399C14.3491 18.032 12.5078 18.75 10.5 18.75C5.94365 18.75 2.25 15.0563 2.25 10.5Z\u0022 fill=\u0022currentColor\u0022 /\u003e\n\u003c/svg\u003e","collection":"heroicons","icon":"24/solid/magnifying-glass","wrap":false,"skaBlocks":{"cx":"w-5 h-auto","t":1709756495,"css":".h-auto{height:auto}.w-5{width:var(\u002d\u002dska-spacing-5)}"},"skaBlocksWidth":{"v":{"$":{"@":"5"}}},"skaBlocksHeight":{"v":{"$":{"@":"auto"}}}} -->
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-5 h-auto wp-block-ska-image" aria-hidden="true">
	<path fill-rule="evenodd" clip-rule="evenodd" d="M10.5 3.75C6.77208 3.75 3.75 6.77208 3.75 10.5C3.75 14.2279 6.77208 17.25 10.5 17.25C12.3642 17.25 14.0506 16.4953 15.273 15.273C16.4953 14.0506 17.25 12.3642 17.25 10.5C17.25 6.77208 14.2279 3.75 10.5 3.75ZM2.25 10.5C2.25 5.94365 5.94365 2.25 10.5 2.25C15.0563 2.25 18.75 5.94365 18.75 10.5C18.75 12.5078 18.032 14.3491 16.8399 15.7793L21.5303 20.4697C21.8232 20.7626 21.8232 21.2374 21.5303 21.5303C21.2374 21.8232 20.7626 21.8232 20.4697 21.5303L15.7793 16.8399C14.3491 18.032 12.5078 18.75 10.5 18.75C5.94365 18.75 2.25 15.0563 2.25 10.5Z" fill="currentColor"></path>
</svg>
<!-- /wp:ska/image --></button>
<!-- /wp:ska/element -->

<!-- wp:ska/element {"metadata":{"name":"Mobile menu button"},"skaBlocksDisplay":{"v":{"$":{"@":""},"[@media(min-width:840px)]":{"@":"hidden"},"editor":{"@":"!block"}}},"skaBlocksAs":{"element":"custom","customElement":"button"},"skaBlocksAttributes":{"record":{"x-data":"","x-on:click.capture":"$store.skaMobileMenu.toggle()","aria-label":"{{Open menu}}"}},"skaBlocks":{"cx":"[@media(min-width:840px)]:hidden editor:!block","t":1709756495,"css":":is(.is-root-container) .editor\\:\\!block{display:block!important}@media(min-width:840px){.\\[\\@media\\(min-width\\:840px\\)\\]\\:hidden{display:none}}"}} -->
<button x-data="" x-on:click.capture="$store.skaMobileMenu.toggle()" aria-label="{{Open menu}}" class="[@media(min-width:840px)]:hidden editor:!block wp-block-ska-element"><!-- wp:ska/image {"mode":"svg","svg":"\u003csvg viewBox=\u00220 0 24 24\u0022 fill=\u0022none\u0022 xmlns=\u0022http://www.w3.org/2000/svg\u0022\u003e\n\t\u003cpath fill-rule=\u0022evenodd\u0022 clip-rule=\u0022evenodd\u0022 d=\u0022M3 6.75C3 6.33579 3.33579 6 3.75 6H20.25C20.6642 6 21 6.33579 21 6.75C21 7.16421 20.6642 7.5 20.25 7.5H3.75C3.33579 7.5 3 7.16421 3 6.75ZM3 12C3 11.5858 3.33579 11.25 3.75 11.25H20.25C20.6642 11.25 21 11.5858 21 12C21 12.4142 20.6642 12.75 20.25 12.75H3.75C3.33579 12.75 3 12.4142 3 12ZM3 17.25C3 16.8358 3.33579 16.5 3.75 16.5H20.25C20.6642 16.5 21 16.8358 21 17.25C21 17.6642 20.6642 18 20.25 18H3.75C3.33579 18 3 17.6642 3 17.25Z\u0022 fill=\u0022currentColor\u0022 /\u003e\n\u003c/svg\u003e","collection":"heroicons","icon":"24/solid/bars-3","wrap":false,"skaBlocks":{"cx":"w-6 h-auto","t":1709756495,"css":".h-auto{height:auto}.w-6{width:var(\u002d\u002dska-spacing-6)}"},"skaBlocksWidth":{"v":{"$":{"@":"6"}}},"skaBlocksHeight":{"v":{"$":{"@":"auto"}}}} -->
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-6 h-auto wp-block-ska-image" aria-hidden="true">
	<path fill-rule="evenodd" clip-rule="evenodd" d="M3 6.75C3 6.33579 3.33579 6 3.75 6H20.25C20.6642 6 21 6.33579 21 6.75C21 7.16421 20.6642 7.5 20.25 7.5H3.75C3.33579 7.5 3 7.16421 3 6.75ZM3 12C3 11.5858 3.33579 11.25 3.75 11.25H20.25C20.6642 11.25 21 11.5858 21 12C21 12.4142 20.6642 12.75 20.25 12.75H3.75C3.33579 12.75 3 12.4142 3 12ZM3 17.25C3 16.8358 3.33579 16.5 3.75 16.5H20.25C20.6642 16.5 21 16.8358 21 17.25C21 17.6642 20.6642 18 20.25 18H3.75C3.33579 18 3 17.6642 3 17.25Z" fill="currentColor"></path>
</svg>
<!-- /wp:ska/image --></button>
<!-- /wp:ska/element --></div>
<!-- /wp:ska/element --></div>
<!-- /wp:ska/element --></nav>
<!-- /wp:ska/element --></div>
<!-- /wp:ska/element --></div>
<!-- /wp:ska/element -->