Sitewide Notice Across The Top of Your Site

You can instead get this as a WordPress plugin.

Here are the CSS and HTML needed to add a simple, site-wide notice across the top of your website.

The CSS

In the CSS that follows, you MUST change the last selector “.container” into the CSS class or ID of your own website’s outermost wrapper element. You can also edit the text color and background color on lines 2 and 3.

#sitewide-banner {
	background-color:#ffeb3b!important;
	color:#000!important;
	position:absolute;
	top:0;
	left:0;
	z-index: 999999;
	width:100%;
	overflow:hidden;
	-webkit-box-shadow:0 0 5px #000;
	-moz-box-shadow:0 0 5px #000;
	box-shadow:0 0 5px #000;
}
#sitewide-banner-content{
	text-align: center;
	padding:10px
}
.container{
	padding-top:70px
}

The HTML

Replace the message, “SUPPORT IS TEMPORARILY UNAVAILABLE” with your own message on line 3. Place the HTML right after your opening body tag.

<div id="sitewide-banner">
	<div id="sitewide-banner-content">
		SUPPORT IS TEMPORARILY UNAVAILABLE
	</div>
</div>