DocsTemplates & site structure

Headers, footers and your theme

How Native AI headers and footers work alongside your WordPress theme, and how to keep the theme’s header on some pages.

A header or footer is a template: design it in the builder like a page, and its display conditions decide where it shows. A new header applies to the entire site.

Native AI and your theme#

  • Pages and templates you build with Native AI are rendered by Native AI, with the Native AI header and footer that apply.
  • With Settings → Templates → Use the Native AI header and footer on every page on (the default), posts and pages that aren’t designed in Native AI also get your Native AI header and footer, with their WordPress content in between. Choose which post types that covers in …for these post types.
  • Everything else keeps using your theme.
  • Settings → Performance → Don’t load the theme’s styles on Native AI pages (on by default) keeps the theme’s CSS from interfering with your design.

Keep the theme’s header on some pages#

  • Give the Native AI header conditions that exclude those pages, or
  • Limit Use the Native AI header and footer on every page to the post types you want, or turn it off.

Header behavior#

Sticky, shrinking and transparent headers are built with interactions — the Header state after scrolling preset adds a “scrolled” state after 80 px of scrolling, which you style in the Design tab (a solid background, a smaller logo). Menus inside a transparent header take the header’s text color, so the scrolled state recolors them too.

Headers usually hold a Menu element. See Menus and mega menus.