Topbar Header Clean White 237

This is a V3 Adaptive component, part of the free catalog: free to copy on the free plan, within a monthly allowance, and no account is needed to start. What you copy stays licensed to you permanently, on unlimited sites, including client sites. See what each plan includes.

Styled by YOUR site. This preview uses our demo colors and fonts. The component itself contains no hardcoded styles: paste it into Elementor and it automatically adopts your site's Global Styles, so every element matches your brand.

Structure

Announcement topbar with contact or promo line above a logo-and-menu bar.

6 elements, single-column layout. Fully responsive: columns stack on mobile, and colors and typography resolve from your Global Styles.

Works with: Elementor Free · Elementor 3.16 or newer (Flexbox Containers)

About This Component

Topbar Header Clean White 237, saved as theme-header-with-topbar-237, sets 6 elements cleanly at single-column spacing. Within its 6 elements, theme-header-with-topbar-237 lets the image and nav-menu widgets inherit Global Styles. theme-header-with-topbar-237 needs only an Elementor Pro license.

How to use

1.Download the template file. On the component page, click Download JSON. You get a single .json file exported in the correct theme template format.
2.Import it into Elementor. In WP Admin go to Templates, then Saved Templates, and click Import Templates. Choose the downloaded .json file. Because the file carries the right template type, Elementor files it under the matching Theme Builder section automatically.
3.Assign your menu and logo. Edit the imported header. Click the navigation area and pick YOUR menu in the Nav Menu widget settings (templates ship pointing at a menu named primary as a hint). Swap the placeholder logo image for your own, or replace the Image widget with Site Logo for a fully dynamic header.
4.Optional: sticky and transparent settings. Sticky variants: select the header container, open Advanced, then Motion Effects, and set Sticky to Top. Transparent variants are designed to overlay a hero; keep their semi-transparent background or adjust it under the container's Background settings.
5.Set the display condition. Open Templates, then Theme Builder, find the imported template and click Add Condition. For a site-wide header choose Entire Site. Use Include rules for sections that need a different header (for example a transparent variant on the homepage). Conditions never travel inside the JSON file; setting them is always your final step.

Full guide with troubleshooting: How to Import an Elementor Header Template

This component includes widgets from the Elementor Pro plugin (e.g., forms, sliders). You'll need an active Elementor Pro license on your WordPress site to use them. Learn about Elementor Pro →

🧩 Theme Builder Template🟢 V3 AdaptivePro

These components use Global Styles. They automatically inherit your site's colors, fonts, and button styles when you paste them. The V3 Adaptive catalog is the free half of the library.

Categorytheme-header

TypeElementor Pro widgets

Complexitysimple

Elements6

Widgets used

imagenav-menusocial-iconstext-editor

Unlock Pro widgets with Elementor Pro

Get access to forms, sliders, testimonial carousels, and 20+ premium widgets

Get Elementor Pro →

Launch Your Website: Get 20% Off Hostinger!

Ready to build your dream site? Get fast, reliable, and affordable web hosting with Hostinger. Use my exclusive link to score an extra 20% off your plan today!

Get 20% Off →

Get premium cloud hosting, enterprise-grade security, and 24/7 support at your fingertips.

Ideal for agencies, freelancers, and businesses building professional WordPress sites.

Get Cloud hosting for WordPress →