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



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
Critical Updates
- Bricks 1.8 Navigation adjustments
Related Frames
Related Components
No related components.
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.
Bricks Header Template Settings How do I style the last 2 list items as buttons
Just replace the CSS in the CSS Tab of “fr-nav-delta” with this one
root { --link-color: var(--action); --link-color-hover: var(--action-hover); --link-color-active: var(--action); --button-color: var(--action); --button-color-hover: var(--action-hover); --button-text: var(--fr-text-light); --button-text-hover: var(--fr-text-light); --toggle-gap: 1em; --sub-li-padding: 1em; } root ul.bricks-mobile-menu { display: flex; } .show-mobile-menu ul.bricks-mobile-menu { display: flex; flex-direction: column; align-items: flex-start; } /* Center Navigation when Nav is set to width:100% */ root .bricks-nav-menu > li:first-child, root .bricks-nav-menu > li:last-child { margin-inline-start: auto; } /* Button Styling */ root .bricks-nav-menu > li:nth-last-child(-n+2) a { background-color: var(--button-color); border-color: var(--button-color); color: var(--button-text)!important; border-width: var(--btn-border-size); border-radius: var(--btn-radius); border-style: solid; min-inline-size: var(--btn-width); line-height: var(--btn-line-height); letter-spacing: var(--btn-letter-spacing); text-transform: var(--btn-text-transform); text-decoration: var(--btn-text-decoration); font-style: var(--btn-text-style); font-weight: var(--btn-weight); padding: var(--btn-pad-y) var(--btn-pad-x); justify-content: center; text-align: center; } /* Button Hover Styling */ root .bricks-nav-menu > li:nth-last-child(-n+2) a:hover { background-color: var(--button-color-hover); border-color: var(--button-color-hover); color: var(--button-text-hover)!important; } root .brx-submenu-toggle { display: flex; flex-direction: row; gap: var(--toggle-gap); } root .brx-submenu-toggle button { margin: 0!important; padding: 0!important; } root .sub-menu { min-inline-size: max-content!important; } root .sub-menu li { padding-inline: var(--sub-li-padding); }
Use the related frames section above to check FAQs for other frames related to this frame if you don't see your question here.