The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] Full-Width Header Wrap

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #169117

    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!


    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).


    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.

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.