Flatsome Header Not Showing: Templates, Transparent Settings and Empty Rows

Gone everywhere, gone on one page, or there but invisible

Start by finding the shape of the problem, because each shape has a different home in Flatsome's settings. Open three pages logged out: the homepage, an inner page and a product. Then select all the text on the page where the header should be, with a mouse drag or Ctrl+A. Invisible text highlights. Missing text does not.

If the whole page looks unstyled, not just headerless, the problem is a stylesheet failing to load. WordPress theme CSS not loading covers that. The cross-theme version of this guide is WordPress header not showing.

The page templates that change Flatsome's header

Flatsome Classic ships more than a dozen page templates, listed by file name in the vendor's hooks documentation. The four below change the header most visibly, and the single-page navigation templates have transparent variants of their own. Set one by accident, or copy a page that used one, and the header behaves differently on that page alone. You choose the template under Page Attributes in the editor, or in UX Builder through the cog in the top right of the side panel.

Template labels can vary slightly between releases, so match on the file name if your dropdown reads differently. The landing-page template is the one that most often surprises owners: it was chosen for a campaign page, and that page was later duplicated as the starting point for a new service page. Duplicates keep their template.

Transparent headers that disappear against a pale page

A transparent header is printed in full. It simply has no background, and it sits on top of whatever the page opens with. Pair the light-text template with a white first section and the logo, menu and icons are white on white. The header is there, doing its job, and nobody can see it.

The settings involved live in Theme Options > Header > Header Main. In the Classic builds we checked, that panel carries a height for the transparent header, a Transparent Header Background Color and an Add Shade option that darkens the top of the section beneath. The logo panel also takes a Logo image - Light Version, which Flatsome uses on dark and transparent header templates. It is usually a white file, and it vanishes on a pale banner.

• Fix the page, not the setting: give the first section a dark banner or image, or switch the page back to a normal template.
• Give the transparent header a background color with low opacity, so text stays readable over any image.
• Check the mobile header separately: a phone crops the banner differently, and light text can land on the bright part of the photo.

Rows, presets and sticky settings in the Header Builder

Flatsome's Header Builder lives in Theme Options > Header and has three rows: Top Bar, Header Main and Header Bottom. The mobile view has its own element slots, separate from desktop. Drag the logo and menu out of the mobile slots and the phone header is empty, while the desktop still looks perfect. Presets are the other trap. The Presets panel itself says to try a preset and not save if you do not want it; publish one by accident and a tuned header is replaced.

Sticky behavior is set in the Sticky Header panel. Classic builds we checked include per-row options such as Header Main - Sticky on Scroll and a Hide sticky when scrolling down option. With that on, the header slides away as a visitor scrolls down and returns when they scroll up, which an owner testing on a long page can read as a header that vanished.

UX Blocks in the header: one shortcode, one missing block

Many Flatsome stores put a UX Block in the header: a promo strip in the Top Bar, a trust badge row, a designed contact area. The block is placed with a shortcode in a header HTML element, in the form [block id="block-name"], where the id is the block's name. Delete the block, move it to draft or change its slug, and the shortcode quietly prints nothing. A header row that held only that block now looks empty or collapses.

The same goes for mega menus, which since 3.13.0 are UX Blocks attached to menu items. And because UX Builder elements have their own responsive visibility options, a block can be hidden on phones from inside the block itself, not from the Header Builder.

• Open UX Blocks in the dashboard and confirm the block exists, is published and has the same name as the shortcode.
• Open the block in UX Builder and check each element's visibility for desktop, tablet and phone.
• If a header row holds only a block, add a fallback element, such as a text line, so the row is never empty.

Bringing the Flatsome header back, in order

1. 1

   Find the pattern

   Test the homepage, an inner page and a product, logged out, on desktop and a phone. Select all text to catch invisible headers.

2. 2

   Check the page template

   On any page missing its header, look at Page Attributes or the UX Builder cog. Switch to Default and compare.

3. 3

   Fix transparent contrast

   If the header is invisible, give the first section a dark background or set a translucent Transparent Header Background Color in Header Main.

4. 4

   Inspect both Header Builder views

   In Theme Options > Header, check Top Bar, Header Main and Header Bottom in the desktop and mobile layouts.

5. 5

   Review sticky options

   In Sticky Header, turn off Hide sticky when scrolling down and retest a long page.

6. 6

   Verify header UX Blocks

   Match every [block id] shortcode in header elements to a published block with that name.

7. 7

   Search Custom CSS for hidden headers

   Look in Theme Options > Style > Custom CSS and Advanced > Custom CSS for display: none on .header or #header, often left over from a landing page.

8. 8

   Purge caches and retest

   Clear the page cache, CDN and optimizer, then test logged out again.

Two more look-alikes. A maintenance or coming-soon plugin can serve its own page without your header to visitors while you see the real site. And the Shop header field in Advanced > WooCommerce is a banner above the shop grid, not the site header; if that banner is missing, check the UX Block shortcode pasted there. Cart counts that show the wrong number belong in Flatsome checkout issues.

Habits that keep the header where shoppers expect it

• Duplicate pages with care. Check the template on every copy before publishing.
• Keep page-specific CSS out of the global fields. A rule that hides the header on one landing page belongs on that page, scoped to it, not in Custom CSS for the whole site.
• Try presets on staging. A preset is a quick way to start and a quick way to lose a tuned header. If an update moved things instead, start with what to do when a theme breaks after an update.
• Name header blocks clearly and never delete one without searching the header and menus for its shortcode.

If the header shows but the phone menu inside it will not open, go to Flatsome mobile menu not working. If header styles changed in the Customizer but not on the live store, see Flatsome CSS not updating. Header work also touches speed, since a header UX Block loads on every page; the Flatsome speed guide explains the cost.

A header assembled from templates, panels and shortcodes

Count the places that decide whether your Flatsome header appears: the page template, three builder rows in two views, the sticky panel, the transparent settings, every UX Block shortcode, two Custom CSS fields and the cache. None is badly designed. Together they make a header that can be switched off from nine places, and no screen that shows all nine at once.

In a Next.js build, the header is one component in code, and a page that needs a different header says so in the same codebase, tested before it ships. That costs more up front and needs a developer for layout changes. Flatsome vs Next.js puts the trade side by side, and Flatsome to Next.js explains the move. Sites we build run on Athena CMS, with plain fields for editing and every version kept.

For a store that should stay on Flatsome, our theme repair team can restore the header and document where each setting lives, and our Flatsome developers can build header blocks that do not collapse when content changes. More Flatsome fixes are in the Flatsome repair hub, and the full set of guides is in WordPress troubleshooting.