Header Delta


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

Header Delta
Available for:
Buy Frames
Back to library


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).


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.

Edit the CTA button background color.


Edit the CTA button background hover color.


Edit the CTA button text color.


Edit the CTA button text hover color.


Edit the spacing between links.

HTML5 Tags & Attributes

No related HTML5 elements.

Accessibility Notes

No additional accessibility notes for this frame.

Related Frames


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.

Bricks Header Template Settings
Bricks 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.