--- 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-09-26 lang: en author: "Aditya Sharma" description: "A countdown halfway down one landing page is only seen by the people who reach that page. A thin bar above the header is seen by everyone, on every page...." 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: 1017 --- # How to Add Elementor Countdown Timer in Hello Top Bar? (Sale FOMO Banner) A countdown halfway down one landing page is only seen by the people who reach that page. A thin bar above the header is seen by everyone, on every page. The **Countdown** widget has a compact one-line layout that fits in a bar like that. The site-wide part comes from your header template, not from the widget. For the full settings tour of the **Countdown** widget, see [Countdown Widget: Settings Overview](https://theplusaddons.com/docs/countdown-widget-overview-in-elmentor/). ***Requirement - This widget is a part of The Plus Addons for Elementor, make sure it's installed & activated to enjoy all its powers.*** [LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/countdown-timer/?utm_source=tpae&utm_medium=docs&utm_campaign=text) ## Before You Start - **Edition:** **Free** — a countdown to a fixed **Launch Date**, the three **Countdown Style** presets and **Inline Style** are all in the free plugin.- **Prerequisite:** [Elementor](https://wordpress.org/plugins/elementor/) (free) installed and active.- **Widget to enable:** go to **The Plus Addons > Widgets**, search for **Countdown** and turn its toggle on.- **Prerequisite:** a way to edit your header globally — a theme-builder header template. That comes from Elementor Pro's Theme Builder or from Nexter Builder. Without one, you can still add the bar to a single page, but not to the whole site. ## Steps - Open your header template for editing.- Add a container above the existing header row. Give it a background colour and tight padding — about 15 px top and bottom is enough.- Drag the **Countdown** widget into that container.- In **Content > Layout**, keep **Countdown Setup** on **Normal Countdown** and set the **Launch Date** to the end of the sale.- Keep **Countdown Style** on **Style 1** and turn **Inline Style** on. This is the setting that makes the timer fit in a bar.- Publish the header template and check the front end on a page it covers. Setting up the Countdown widget's content options before placing it in the bar. ![A countdown timer rendered as a thin sale banner above the site header.](https://theplusaddons.com/wp-content/uploads/2024/07/Hello-top-bar-demo-1024x175-1.png) ## Settings | Setting | What it does | Default | | ------- | ------------ | ------- | | **Inline Style** | Puts the four units on one line. Measured: 37 px tall instead of 124 px. Available only with **Style 1**. | Off | | **Countdown Setup** | Use **Normal Countdown** for a sale that ends at one fixed moment for everyone. | **Normal Countdown** | | **Days Section Text** and the other three | Shorten the labels to *D H M S* if the bar is tight. | **Days**, **Hours**, **Minutes**, **Seconds** | ## How It Behaves - The widget itself behaves exactly as it does anywhere else. Nothing about a header changes it.- With **Inline Style** on, the four units sit on a single row and the whole widget is roughly a third of its normal height — measured at 37 px against 124 px.- If your header container is sticky, the timer stays visible and keeps counting as the page scrolls. That was watched on a published page.- The deadline comes from your WordPress timezone, so every visitor sees the bar end at the same moment. ## Limitations - **Style 2 and Style 3 read the deadline in the visitor's timezone; Style 1 reads it in your site's.** This was isolated with a controlled test. One **Launch Date**, nothing else changed: from a browser five and a half hours ahead of the site, **Style 1** showed **02 DAYS 01 HOURS 56 MINUTES** left while **Style 2** and **Style 3** showed **1 Day 20 Hours 25 Minutes** — short by exactly that offset. Repeating it with the browser set to the site's own timezone made all three agree. So on a live site a **Style 2** or **Style 3** sale ends at a different real-world moment for every visitor, and for visitors far enough ahead of your site it can be over before it starts. If the exact end time matters, use **Style 1**.- **The site-wide part is not the widget's doing.** The Countdown widget has no setting that puts it in a header. If you do not have a theme-builder header, the bar will only exist on the page you built it on.- **Inline Style is not responsive.** It is one on/off value, not a per-device control. On a narrow phone the bar may still wrap; shorten the label text or hide a unit.- **Launch Date is only accurate to the minute.** The date picker stores hours and minutes; seconds are dropped. A deadline set for 10:30 fires at 10:30:00, so do not build anything that depends on a particular second.- **The deadline is your site's clock, not the visitor's.** The target time is rendered from the WordPress timezone on the server. Visitors in other timezones all see the timer end at the same moment, which is usually what you want — but it will not match “midnight” where they are.- **Turn Elementor's element cache off for this widget.** Elementor's **Element Cache** is on by default and stores rendered markup for a day, which can serve a stale deadline. Set **Advanced > Layout > Cache Settings** to **Inactive** on the Countdown widget, or disable it site-wide under **Elementor > Settings > Performance**. ## Troubleshooting ### The bar is too tall Two things: turn **Inline Style** on (it only appears with **Style 1**), and reduce the container's padding. The widget's own height is 37 px inline; anything taller is coming from the container. ### The timer wraps onto two lines on mobile Shorten the labels under **Content > Content Source** — change **Days Section Text** to *D* and so on — or turn the **Days** switcher off if the sale is shorter than a day. ### The countdown appears on some pages but not others That is your header template's display conditions, not the widget. Check which pages the template is assigned to. ## Not verified So you know exactly what has and has not been checked: - **The Hello theme's own top bar.** The theme on the test site is Twenty Twenty-Five, so no Hello-specific screen was opened. What was verified is the widget: its inline layout, its height, and that it keeps ticking inside a bar pinned to the top of the viewport.- **Elementor Pro's Theme Builder and Nexter Builder.** Neither is installed on the test site, so the header-template steps above describe the tool, not a screen that was walked through.- **Mobile breakpoints.** Measurements were taken at a 1200 px viewport. ## Related Docs - [How to Create a Sticky Countdown Timer in Elementor?](https://theplusaddons.com/docs/create-a-sticky-countdown-timer-in-elementor/)- [How to Style Elementor Countdown Timer in Block or Inline Style?](https://theplusaddons.com/docs/style-elementor-countdown-timer-in-block-or-inline-style/)- [How to Hide Countdown Days/Hours/Mins/Seconds in Elementor Countdown Timer?](https://theplusaddons.com/docs/hide-countdown-days-hours-mins-seconds-in-elementor/)- [Countdown Widget: Settings Overview](https://theplusaddons.com/docs/countdown-widget-overview-in-elmentor/)