This CSS will generate exactly what you see in this screen shot below.
The code has been tested on the Genesis Sample child theme and Twenty Twelve.
All you need to do is change the class and values in the code for the width, height and color. Then you can use this CSS on any element including your header.
The CSS code for Media Queries are not included as all themes are coded differently so its impossible to cover all.
Please be advised it could require a fair amount of CSS code if you want to continue displaying these ribbons at different screens sizes. The easy way out is to use display: none.
Was This Tutorial Helpful?