Adding strip of color to bottom of header

[jmamuzich]

Hello,

I want to add a 6px or so strip of color to the bottom of my header above the bottom blue border that is currently there. Does anyone know how I can target this in the css?

thanks so much in advance.

Jaclyn

http://162.144.99.26/~sacrealt/

[cwalsh]

You could try making an image of the stripe you want to use and set it as the background image of .site-header. In this example, the images is uploaded into the images folder of the theme.

.site-header {
background: #fff url(images/green-stripe.png) repeat-x bottom center;
min-height: 160px;
background-color: #fff;
border-bottom: 12px solid #1e318b;
margin-top: 3.75em;
-webkit-box-shadow: 0 15px 5px -15px #1e318b;
-moz-box-shadow: 0 15px 5px -15px #1e318b;
box-shadow: 0 15px 5px -15px #1e318b;
}

---

Need website customization services or other help? Caley @ PixelPerfect Design Studio | Connect with me on Twitter: @pixelsperfect | Like me on Facebook: https://www.facebook.com/PixelPerfectDesignStudio

[jmamuzich]

Thank you for the suggestion! I am trying to do it with pure css but I might do this if I can't figure it out. Thanks again!

- Jaclyn

[cwalsh]

I found this article, perhaps this will work http://css-tricks.com/snippets/css/multiple-borders/

---

Need website customization services or other help? Caley @ PixelPerfect Design Studio | Connect with me on Twitter: @pixelsperfect | Like me on Facebook: https://www.facebook.com/PixelPerfectDesignStudio

[jmamuzich]

It did, thanks 🙂 The only problem is I think something is wrong in my css:

.site-header {
	background-color: #fff; 
	border-bottom: 12px solid #1e318b;
	position: relative;
	display: inline-block;
	margin-top: 3.75em;
	-webkit-box-shadow: 0 15px 5px -15px #1e318b;
	   -moz-box-shadow: 0 15px 5px -15px #1e318b;
	        box-shadow: 0 15px 5px -15px #1e318b;
}

.site-header:before {
	content: '';
	position: absolute;
	left: 0;
	bottom: 6px;
	width: 100%;
	height: 5px;
	background: #63b120;
}

because now it's displaying to the left and not all the way across the page like it did before. Not sure what exactly is wrong. I tried playing around with the code

[Author]

Posts