---
title: "How to Add WordPress Countdown Timer in Hello Top Bar? (Sale FOMO Banner)"
url: https://nexterwp.com/docs/add-wordpress-countdown-timer-in-hello-top-bar-sale-fomo-banner/
date: 2024-12-09
modified: 2026-09-14
lang: en
author: "Aditya Sharma"
description: "A countdown on one landing page only pressures the people who reach that page. Putting the same timer in a top bar carries the deadline across every page of the..."
image: https://nexterwp.com/wp-content/uploads/2024/12/How-to-Add-WordPress-Countdown-Timer-in-Hello-Top-Bar_-Sale-FOMO-Banner-1024x519.jpg
word_count: 396
---

# How to Add WordPress Countdown Timer in Hello Top Bar? (Sale FOMO Banner)

## Key Takeaways

- Nexter Blocks Countdown block adds a countdown timer in the top bar of a WordPress website for a sale banner and FOMO effect.
- Nexter Builder creates the header template needed to place the top bar section before adding the Countdown block.
- Countdown Setup uses Normal, Countdown Style selects a style, and Time and Date fields set the end date and time; Action After Countdown Ending adds actions after the timer ends.

A countdown on one landing page only pressures the people who reach that page.

Putting the same timer in a top bar carries the deadline across every page of the site.

*For every Countdown setting in one place, see the [Countdown block guide](https://nexterwp.com/docs/add-a-countdown-timer-in-wordpress/).*

[LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/blocks/wordpress-countdown-timer/)

## Before You Start

- **Edition:** Free — works in Nexter Blocks (free) and with Nexter Blocks Pro.- **Block to enable:** Countdown, switched on under **Nexter > Blocks** in your WordPress dashboard.- **Your end date and time decided.** The block reads it in your site's timezone, set under **Settings > General**, not the visitor's.

## Steps

- Add the **Countdown** block to your page and click **Design from Scratch**.

- In **Countdown Options**, leave **Countdown Setup** on **Normal** and set the end date and time.

![The Countdown Setup setting with Normal, Evergreen and Fake No.](https://nexterwp.com/wp-content/uploads/2026/09/countdown-setup.webp)

- Build your top bar — with the Hello Bar feature in Nexter, or any header or bar template your theme provides.

- Add the **Countdown** block inside it and set the end date.

![The Countdown Setup setting with the end date](https://nexterwp.com/wp-content/uploads/2026/09/countdown-setup.webp)

- Switch **Inline Style** on so the units sit on one line and fit the bar.

![The Inline Style setting](https://nexterwp.com/wp-content/uploads/2026/09/countdown-inline.webp)

- Shorten the labels, or switch them off entirely, so the timer stays compact.

![The Label panel with shortened unit text](https://nexterwp.com/wp-content/uploads/2026/09/countdown-label-text.webp)

- Publish, and check the bar on a phone as well as a desktop.

## How It Behaves

- The countdown behaves exactly as it does anywhere else — the bar is just where it sits.- **Inline Style** is what makes it fit: the units sit on one line rather than as four blocks.- Short labels, or none at all, keep the bar from wrapping onto two lines on small screens.- Because the bar shows site-wide, the same deadline follows the visitor from page to page.

## Limitations

- A site-wide bar is seen on every page, so a countdown there is the most repeated element on your site — keep it small.- Bars are tight on phones. Four units with full labels rarely fit.- If the countdown ends, whatever ending action you set happens in the bar too, on every page.- The bar itself comes from your theme or another Nexter feature; this block only supplies the timer.

## Troubleshooting

### The timer wraps onto two lines in the bar

Switch **Inline Style** on and shorten the labels, or turn labels off altogether.

### It looks fine on desktop but breaks on mobile

Reduce the font size for mobile in the Style tab, and consider hiding the labels at that width.

## Related Docs

- [Style the countdown timer](https://nexterwp.com/docs/style-wordpress-countdown-timer-in-block-or-inline-style/)- [Countdown block: all settings](https://nexterwp.com/docs/add-a-countdown-timer-in-wordpress/)- [Show a message after it ends](https://nexterwp.com/docs/show-custom-text-message-after-countdown-timer-ends-in-wordpress/)