Add informational bar to the Storefront header

On our Storefront demo, you may have noticed the black bar beneath the navigation that includes informational text. This is possible by adding basic HTML to a text widget placed in the Header widget region.

Screen Shot 2015-02-03 at 12.11.09 — The informational bar on the Storefront demo

To recreate, add a text widget to your Header widget region and insert the following code:

	<div style="text-align: center; background: #000; color: #fff; padding: .53em; font-weight: bold;">
	<span style="margin: 0 1em;">Check out our new Jackets!</span>
	<span style="margin: 0 1em;">Get 25% off your first order!</span>
	<span style="margin: 0 1em;">Free shipping on all orders over $100!</span>
	</div>

view raw widget.html hosted with ❤ by GitHub

This can be tweaked to suit your needs.

Note: This is a Developer level doc. If you are unfamiliar with code/templates and resolving potential conflicts, select a WooExpert or Developer for assistance. We are unable to provide support for customizations under our Support Policy.