--- title: "How to Add Elementor Countdown Timer in Hello Top Bar? (Sale FOMO Banner)" url: https://theplusaddons.com/docs/elementor-countdown-timer-in-hello-top-bar/ date: 2024-01-16 modified: 2026-08-27 lang: en author: "Aditya Sharma" description: "Do you want to show a countdown timer in your site's top bar? A thin strip pinned above the header, ticking down a sale or a launch, stays visible on..." image: https://theplusaddons.com/wp-content/uploads/2024/01/How-to-Add-Elementor-Countdown-Timer-in-Hello-Top-Bar_-Sale-FOMO-Banner-1024x536.jpg word_count: 1016 --- # How to Add Elementor Countdown Timer in Hello Top Bar? (Sale FOMO Banner) Do you want to show a countdown timer in your site's top bar? A thin strip pinned above the header, ticking down a sale or a launch, stays visible on every page a visitor scrolls through, which makes it one of the most effective FOMO placements for a promotion. With the Countdown widget from The Plus Addons for Elementor, you can add a countdown timer to a Hello-bar-style top strip on your Elementor website. *To check the complete feature overview of The Plus Addons for Elementor Countdown widget, [click here](https://theplusaddons.com/docs/countdown-widget-overview-in-elmentor/).* > **Requirement:** This widget is a part of The Plus Addons for Elementor. Make sure it is installed and activated to enjoy all its powers. [LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/elementor-countdown-timer/?utm_source=tpae&utm_medium=docs&utm_campaign=text) Table Of Contents ## What It Does This is a placement pattern rather than a separate widget mode: you build a top bar section in your site's header template and add the Countdown widget to it, so the same countdown shows above the header on every page that template covers. The Countdown widget itself works exactly the same way here as anywhere else, it is the placement inside a global header template that turns it into a site-wide top bar. ## Why It Matters A countdown buried inside one page's content only reaches visitors who land on that exact page. A promotion often needs more reach than that, especially a sitewide sale or a launch you want every visitor to notice regardless of which page brought them in. Putting the widget in a header top bar solves that. Because header templates apply across the site, the same countdown appears above every page the template covers, without adding it to each page individually. ## What You Get - A top bar section built inside your header template using Nexter Builder or Elementor Pro's Theme Builder.- The Countdown widget placed inside that section, using its Normal Countdown setup.- A countdown that shows above the header on every page the header template applies to. ## Benefits - **Site-wide visibility:** one placement, in the header template, shows the countdown on every page it covers.- **High-attention position:** a top bar sits above the fold before any other content, where visitors are most likely to notice it.- **No coding:** the top bar is a normal section built with the same header/theme builder tools you already use. ## Capabilities - **Any Countdown Setup type:** Normal Countdown, Scarcity (Evergreen), or Fake Numbers Counter can all sit in a top bar, though a single fixed-date Normal Countdown is the most common fit for a sitewide banner.- **Full widget feature set:** Content Source styling, After Expiry Action, and Class Based Section Visibility all work the same as they do anywhere else the widget is placed.- **Template-driven reach:** the top bar's reach is controlled entirely by your header template's own display conditions, wherever that template applies, the countdown applies too. ## How It Works Header and top-bar sections built in a theme builder are stitched into every page that template is assigned to, above the rest of the page's own content. Placing the Countdown widget inside one of those sections means the widget renders as part of the header on each of those pages, not as part of any single page's own content. From that point on, the widget behaves exactly like any other Countdown widget instance, counting down to its Launch Date and applying whatever After Expiry Action or styling you set on it. ## How to Use It Adding the Countdown widget and setting up Normal Countdown. To create the top bar section, add the Countdown widget there, and follow the steps: > *Note: to create the top bar header template, you can use the free [Nexter Builder](https://nexterwp.com/docs/nexter-theme-builder-explained/), or Elementor Pro if you already have it.* - Build a top bar section at the top of your header template, sized and styled as a thin strip.- Add the Countdown widget inside that section.- Select **Normal Countdown** from the **Countdown Setup** dropdown.- Choose the appropriate style from the **Countdown Style** section.- Set the end date and time in the **Launch Date** field. You can edit the countdown's day, hour, minute, and second labels from the Content Source tab, and set up an action for when the countdown ends, or a class-based content swap, from the Extra Option and Special Option tabs. Also read, the [5 best WordPress countdown timer plugins](https://theplusaddons.com/blog/best-wordpress-countdown-timer-plugins/). ![A countdown timer running in a thin top bar above a website header](https://theplusaddons.com/wp-content/uploads/2024/07/Hello-top-bar-demo-1024x175-1.png)A Countdown widget placed in a header top bar section. ## Use Cases - **Sitewide flash sale:** a "sale ends in" strip visible from any page, not just the sale landing page.- **Product launch:** a countdown to a release date, shown above the header until launch.- **Seasonal promotion banner:** a recurring top bar for a holiday sale or limited event. ## Limitations - There is no dedicated "Hello Top Bar" widget or setting in the plugin. This is a placement pattern, a normal Countdown widget inside a header top bar section, not a distinct feature with its own controls.- The countdown's reach is exactly the reach of the header template it sits in. If that template is not assigned to a page, the top bar and its countdown will not show there either.- A top bar takes up vertical space on every page it appears on, so it competes for attention with your main navigation, particularly on small screens.- Building and assigning the header template itself, and making the bar sticky if you want it to stay visible on scroll, is done through your theme builder's own header and sticky settings, not through the Countdown widget. ## Troubleshooting **The top bar does not show on some pages.** Check your header template's display conditions in your theme builder. The Countdown widget only shows where the header template itself is assigned to show. **The countdown looks fine in the editor but is missing on the live site.** Confirm the header template has been published, and not left in draft, and that the page you are checking is not excluded by the template's display conditions. **The bar pushes the rest of the header down awkwardly.** This is a layout and sizing issue in the top bar section itself, adjust its height and spacing in your theme builder the same way you would for any other header section. Also read, [the full Countdown widget settings overview](https://theplusaddons.com/docs/countdown-widget-overview-in-elmentor/).