Skip to main content

Header Builder Troubleshooting

Answers to the questions we hear most about headers built with the Header Builder.

The menu button doesn't open anything​

  • The header's menu has no links. The off canvas panel is only added to the page when the header's Navigation block has at least one link. Keep at least one, even if the menu button replaces the links at every screen size.
  • You're opening it from your own button. Check that the button has the nectar-ocm-trigger-open class under Advanced → Additional CSS class(es). The Slide Out From Side Hover Triggered style only opens from the header's own menu button, so pick another style if you need a custom trigger.
  • An optimization plugin is blocking theme files. Plugins that remove, delay or combine CSS and JavaScript can stop the panel from loading. Exclude the theme's files from those features and test again.

See Off Canvas Menu for how the panel opens and closes.

The Transparent state never shows​

Transparent Header in Appearance → Customize → Header Navigation → Transparent Header Effect is the master switch. While it's off, no page uses the Transparent state, even if the page's own Transparent Header toggle is on. With it on, choose the pages under Automatically Enable On or turn it on per page. See When each state applies.

The logo should change when the header is transparent or scrolled​

The Image block can't swap its image per state. Use two logos and show one at a time with Display in each state. See Show a different logo in a state.

I can't change the mobile breakpoint​

The Header Builder uses fixed screen sizes, and the Customizer's Header Mobile Breakpoint only applies to the classic header. See Screen sizes.

If a long menu wraps on small laptop screens before the menu button takes over, reduce the Navigation block's Gap or font Size, or turn on Desktop under the Overlay tab's Display to use the menu button at every size.

The Mega Menu option in Appearance → Menus does nothing​

That option belongs to the classic theme header. In a Header Navigation template, add a Megamenu block inside a menu item's submenu instead. See Building a Megamenu.

A header layout from the Template Library shows up below my header​

Header layouts need to go into a Header Navigation template, not a page. Inserted into a page, the layout becomes part of that page's content. Create the template in the Theme Builder and insert the layout there, or copy the row out of the page and paste it into the template. See Template Library.

See Working with menus.

A blend mode on the logo doesn't mix with the page behind it​

The header is fixed to the top of the screen, which gives it its own stacking context. A blend mode such as Difference set on a logo or link only mixes with the header itself, not with the page scrolling under it.

To blend with the page, put the blend mode on the whole header in Custom Global Code and keep the header's background transparent:

#nectar-nav {
  mix-blend-mode: difference;
}

This blends the entire header, so the menu blends along with the logo.

Safari's toolbar colors on iPhone don't match my header​

From iOS 26, Safari ignores the theme-color tag and colors its toolbars from the page itself. By default both bars follow the page background, set in Appearance → Customize → General Settings → Styling → Theme Background Color. A header with a solid background that spans the full width at the top of the screen can tint the top bar. A floating header with a gap above it doesn't.