[Solved] Full-Width Header Wrap

[minterdewitt]

I’m still in the beginning stages of understanding responsive design, so bear with me on this for a wee second. This is the website I would like to emulate. More specifically, that colorful five pixel bar in the header. When you re-size the page, the height stays the same while the colored bits take up the specified percentage written in the CSS, here:

#header-wrap:after {
    content: '';
    width: 100%;
    height: 5px;
    position: absolute;
    bottom: -5px;
    z-index: 2;
    background-image: -webkit-linear-gradient(left,#f4bb15,#f4bb15 11%,#e5891a 11%,#e5891a 22%,#4f89ca 22%,#4f89ca 33%,#20b0da 33%,#20b0da 44%,#84c31c 44%,#84c31c 55%,#4a799d 55%,#4a799d 66%,#3360b3 66%,#3360b3 77%,#0f449c 77%,#0f449c 88%,#db4646 88%,#db4646 100%);
}

Now, I would like to create my own colorful bar at the top of my own website, here. How should I go about placing the :after? Or is that even required? And will I have to modify the HTML/PHP on my website to accommodate for it or can I simply do everything through custom CSS? Thank you in advance to anyone who can help me with this!

[shaneisme]

If #container is consistently the main page wrapper, you could use #container:before instead of after. You wouldn’t need the bottom: -5px though, and you might need to adjust the z-index all depending on the rest of your site.

Upon inspecting the DOM though, #container has a height of 0 because it, and all of its parents, all of no height specified – only min-height. So you could either define html and body to have a height of 100%, or just give #container a min-height of 5px (which is how tall the colored bar is).

You could also simply add a new element after body called .color-bar or something… you could even make it fixed or something like that so it’s always there if you did (just spit-balling).

[Alen]

http://codepen.io/alenabdula/pen/AchFJ

[minterdewitt]

Thank you, @shaneisme and @Alen. I made the z-index: 9999; because I want it to always be on top. Now I just need to pick splendiferous colors! Thanks once again.

[Author]

Posts