Header Delta

overview

A page-width, boxed-style sticky header with optional glass-blur effect.

Available for:

Figma

Bricks

Gutenberg

Buy Frames

Back to library

Overview

Header Delta is a page-width header designed to be used in sticky mode. It has an optional glass-blur effect that can be turned on in the CSS panel if desired (off by default).

Header Delta features a new nav menu (Nav Menu Delta) which is unique in that it turns the last-position link into a CTA button automatically and aligns it to the far right. This is a better pratice than using a standalone button that exists separately from your menu.

Why? Because it automatically retains that CTA link in the mobile menu without any additional trickery while maintaining proper semantic menu structure (that CTA is still technically a nav menu item, so it shouldn’t exist outside of the nav menu).

Variables

This frame uses the following locally scoped variables to make it easier for you to edit the style or behavior of this frame. Variables can be viewed or edited from the CSS tab.

--button-color

Edit the CTA button background color.

--button-color-hover

Edit the CTA button background hover color.

--button-text

Edit the CTA button text color.

--button-text-hover

Edit the CTA button text hover color.

--link-gap

Edit the spacing between links.

HTML5 Tags & Attributes

No related HTML5 elements.

Accessibility Notes

No additional accessibility notes for this frame.

Related Frames

Nav Menu Delta

FAQs

How do I turn on the glass morphism effect?

You can turn on the glass morphism effect by selecting the .fr-header-delta class, opening the CSS tab, and uncommenting the following line of CSS:

root {
   /* Uncomment line below if you want glass blur effect */
   /* backdrop-filter: blur(5px); */
}

It should look like this when you’re done:

root {
   backdrop-filter: blur(5px);
}

Why can't I see the glass morphism effect even when I've turned it on?

The likely culprit here is that you’re using a opaque background color on your header. Glass morphism only works with transparent colors. Try a transparent color such as var(–base-ultra-dark-trans-60).

How do I make the header sticky?

In Bricks, you must turn on the sticky header feature in the header template settings.

Use the related frames section above to check FAQs for other frames related to this frame if you don't see your question here.