Description
Add sticky top and bottom bars with multiple banners
Top Bar Notification & Sticky Banners is the most flexible and configurable, yet simple, plugin for displaying bars at the top or bottom of your site. Easily add promotions, announcements, messages, or banners to your site for your visitors.
Compatible with most themes, it includes 7 different sticky methods. Add image banners, announcements, and messages. Easily create your own styles with its built-in style editor using your own fonts.
🚀 Powerful & easy to use
- Top and bottom bars: with unique or multiple banners on each, dismissible or not at your convenience.
- Unlimited banners: When there is more than one banner per bar, they run animated.
- Optional dismiss: Each bar can have a dismiss button, stored in a cookie only in this case.
- Automatic font detection: Use your theme fonts directly in your banner styles.
- Banner preview mode: After installation, adjust everything and preview all on the front end while logged in as an admin. Bars remain hidden from other users until you switch to real mode.
✅ Highly theme compatible & configurable
- Configurable sticky behavior with 7 modes: Always visible, only at the top, scroll-based reactions, and more.
- Wide range of configurable options: Adjust plugin behaviors, fonts, embed CSS, fine-tuning, speed variables, and more.
- Highly theme compatible: Includes a custom script to prevent overlapping between the sticky top bar and your sticky theme header (optional, with three distinct modes).
- Use your own shortcode: Add any shortcode inside the banner content, it will be replaced.
❤️ WYSIWYG styles & banner edition
- User-friendly style editor: Create unlimited bar styles with live WYSIWYG previews directly in the wp-admin side.
- Flexible banner content: Add responsive image banners or text banners with or without a CTA button, with your custom styles in each. Live preview.
🏁 Lightweight
- Coded for performance: Built-in CSS compiler+minifier: one minfied CSS file.
- Minimal footprint: Unique 5 KB JavaScript file & lightweight banner HTML.
- No more embeds: Use your own fonts: no extra fonts embed.
- Only when requested: Only embedded when some bar is displayed.
🔍 Auto-detection of your own fonts
- Out of the box, Top Bar Notification & Sticky Banners plugin will auto-detect your theme fonts. It will be available in the style editor.
- You can force re-detection in Top Bar NSB > Settings > Fonts.
- You can force admin font load for accurate preview.
- You can add fonts that auto-detect can’t see.
- However, you can’t use this plugin to add new fonts in your website.
🍭 Use your own CSS
There is more than one way to customize:
1. You can add a custom class on each banner.
2. You can add inline-styles on each style edition page (with live preview)
3. You can add your own CSS in the advanced settings
🔨 Shortcodes for responsive
Use this shortcodes in the banner content editor:
[topbarnsb-desktop] (your desktop image or text content) [/topbarnsb-desktop]
[topbarnsb-mobile] (your mobile image or text content) [/topbarnsb-mobile]
…in any banner you need.
✅ Ready for Advanced users & Theme developers
Template system with overrides for theme developers: override whole plugin CSS, banner style CSS or the banner HTML as you need.
To do it, copy the plugin /templates folder into your theme, and rename the folder to /topbarnsb. Then edit the files as you need.
Screenshots
Homepage with top and bottom bar 
Live Banner Edition WYSIWYG 
Live style Edition WYSIWYG 
Settings: Main options 
Settings: Top Bar Options (same for bottom bar) 
Settings: Auto-detected fonts 
Settings: Advanced settings
Installation
Install as any other plugin.
Out of the box, some demo styles and banners has been added, but only logged-in admins can see it by now.
In the admin menu, you’ll get a new option: “Top Bar NSB”.
Edit styles and banners, or delete it or add a new ones.
Go to front-end to see the result.
Go to settings in Top Bar NSB > Settings
Adjust the dismiss bar options, sticky modes etc.
Then switch from Demo mode on to off (everyone can see now your top/bottom bars)
FAQ
-
By now, all your whole website will show the same banners.
-
- Check if you have dismissed your banners. Go to any plugin admin page (Top Bar NSB) and look for a message like that in the the top of the page: “You have clicked to hide the banners. To show them again, click here: [Show again]
- Check if you are in demo mode: in this case, you’ll see the banners logged as admin only. Disable demo mode in Top Bar NSB > Settings
- Check if you haven’t any banners or, if all banners are disabled: go to Top Bar NSB > All the banners, edit some banner and enable the “Active banner” option.
-
How to make it dismissible
-
Go to Top Bar NSB > Settings and look for the option “Global dismiss button”. Each banner can’t have its own dismiss, but each bar can have his own (top & bottom bars)
-
Strange effects with my theme’s sticky header
-
Go to settings at try another “Try to move down the top-fixed theme header” setting option. You can also try to adjust times in the “advanced settings section”
-
You can add images as banner content: upload through the media library as usual and place it in the banner editor. You can set two images, one per desktop and one per mobile, using our shortcodes:
[topbarnsb-desktop] (your desktop image or your content) [/topbarnsb-desktop] [topbarnsb-mobile] (your mobile image or your content) [/topbarnsb-mobile] -
Use my own theme fonts
-
The available fonts in your website front-end are automatically detected. If you ever switch your theme, remove or install new fonts, go to Top Bar NSB > Settings > Fonts and click on “Autodetect site fonts again”.
If it can’t detect your fonts, you can add it manually in the below section. -
We don’t load your fonts in admin side. If you want to do it for better preview, go to Top Bar NSB > Settings > Fonts, find your font, click on “Force load font in admin” and add manually your font URL.
Reviews
There are no reviews for this plugin.
Contributors & Developers
“Top Bar Notification & Sticky Banners” is open source software. The following people have contributed to this plugin.
Contributors
Translate “Top Bar Notification & Sticky Banners” into your language.
Interested in development?
Browse the code, check out the SVN repository, or subscribe to the development log by RSS.
Changelog
1.0.0 Hello world!!!