Frames Logo
Buy Now - $200

Header Delta

overview

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

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

Frame Created on January 17, 2023

Frame Last Updated on September 26, 2023

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
--button-color-hover
--button-text
--button-text-hover
--link-gap
--sub-item-padding
--toggle-gap
--link-color
--link-color-hover
--link-color-active

Critical Updates

Here is a list of potentially breaking changes associated with this frame. Click on an entry to view recommended action steps.
  • Bricks 1.8 Navigation adjustments

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