Sticky Notification Bar Script

CSS and HTML responsive header promo free script

Example on this page
If you scroll this page down, the notification bar at the top of the page will scroll with the page. This is called a "sticky" div or header and uses css fixed position code. This bar can be used as a notification for promos, or a phone number and includes social icon links on the right side of the bar. This free script is responsive and uses CSS Media Queries code to optionally hide some icons on smartphones to fit the bar across the header area.


Download script
The following free download is add-free and includes all code and files to place this bar on your webpages. The download includes an option to display a weather widget. See the included help page for setup instructions and options.

Download Sticky Notification Bar (.zip)


Included in the download:
Notification bar instructions & example
Weather widget instructions & example


Weather widget option
This addon includes a small weather widget setup option in the download. You can set this widget to display your local weather forecast. Widget provided by WillyWeather Free Weather Widgets.


Mega Menu Templates Add globally to jQuery includes
If your template has an includes folder you have jQuery includes. In this case, to add the HTML bar code, you'll want to add it to your "header.htm" in the "includes" folder using the following steps.

1. Skip the HTML code step on the addon help page.
2. Copy the HTML code from the "headerbar-promo.js" or "headerbar-WEATHER.js".
3. Paste the code to the top of your "header.htm" in the "includes" folder. Remove the document.write(' start tag and end tag '); from each line of code.

Options
See the help page included with the script download. Editable options include:

• Edit with your own text and links.
• Background colors and border.
• Replace flower background image. A transparent .png is used. Code is in the download css file that you can edit with a different image.
• Use your own icon images.
• Set widget to your local weather.

Included icons
The following 30 x 30 pixel icons, Facebook, Instagram, Google Plus, Twitter and Home, are included with this addon in the download. Get more icons.


You can optionally use your own icons. The default icon size is 30 x 30 pixels. Icon images are .png images with a transparent background. You can optionally use any image type by editing the menu file included with the download.


Adjusting the height
Edit the bar height and min-height in the css file in the download. You may need to edit the height in 3 places. To stay mobile compliant, the notification bar is set to 32 pixels in height. In responsive design webpages, it is recommended that you not increase the height by too many pixels for better smartphone display.


The media queries & smartphones
Media queries css code is used to hide 2 of the social icons when the browser width becomes less than 482 pixels. This code was included so the bar can fit on smartphone screens. If you add more icons, you may need to include the class "hbar-hide". Details are outlined on the downloaded help page.



TROUBLESHOOTING: Bar not working:

• See troubleshooting section on the help page included with the download.
• Can not see bar: The bar may be under another item on your page. Try editing the z-index in the css file to a higher number.

Device compliance
This script has been tested in all web browser software, IE, Safari, Google Chrome, Firefox and Opera and also iPhone and iPad and was compatible with all devices. If you encounter problems in other browsers or devices, please contact us to let us know.




More Free Scripts
Free news scroller script
jQuery floating icon menu
Sticky header