When you use Floating Bar (Top Bar) display type, you can choose whether the bar sits on top of everything or above your site header as the first element on the page. The second option helps themes where a fixed bar would cover or fight with the navigation.
Set this under Appearance → Floating Bar Placement. You need display type Floating Bar (Top Bar) first. See Display Types.
Two placement modes
| Mode | What visitors see |
|---|---|
| Fixed at top of viewport | Bar floats over all content, including the header (default) |
| Above header (first element) | Bar is inserted before your theme header in the page HTML |
Fixed at top of viewport
The bar uses a fixed position at the top of the browser window. It stays visible while scrolling and layers above most page content. Good when you want a persistent promo strip.
Above header (first element)
Notifal inserts the bar before your site's header element (detected automatically using common selectors like header, .site-header, #masthead).
Good when:
- Your sticky header should stay directly under the bar
- A fixed overlay bar hides important menu links
- You want the bar to feel like part of the page layout
Sticky on scroll
When Above header is selected, an extra toggle appears:
| Setting | Behavior |
|---|---|
| Sticky on scroll: On | Bar sticks to the top when the visitor scrolls down |
| Sticky on scroll: Off | Bar scrolls away with the page |
Turn sticky off for one-time announcements visitors should scroll past. Turn it on for ongoing promos.
This option only applies to Above header placement.
Theme compatibility tips
Some themes need extra spacing so content is not hidden under a sticky bar. Notifal includes compatibility CSS for common cases. Theme developers can add more rules through a WordPress filter (notifal/onpage/topbar/above_header_compat_css) if your header still overlaps.
Things to try if the bar looks wrong:
- Switch between Fixed at top and Above header and preview both.
- Adjust Distance from Edge in bar position settings. See Position and Device Visibility.
- Test on mobile. Headers often behave differently on small screens.
- Raise Z-Index only if something still covers the bar.
Bar position vs placement
| Setting | Controls |
|---|---|
| Desktop/Mobile Bar Position | Which edge the bar attaches to (top, bottom, left, right) |
| Floating Bar Placement | Fixed overlay vs inserted above header |
For a classic top announcement, use Bar Position: Top plus Above header if your theme needs it.
Checklist
- [ ] Display type is Floating Bar (Top Bar)
- [ ] Chose Fixed at top or Above header based on my theme
- [ ] Set Sticky on scroll for above-header mode
- [ ] Previewed on desktop and mobile