Header position: fixed

Question

I would like to know if by any chance I can have a fixed header still at the screen when I scroll down and how can I do it?

I tried to add to the CSS position: fixed; in the .header.dark class but it's breaking the template.

Thanks for your help.

Answer 1

Should work OK. Try this:

<div class="header">This is the header</div>

CSS

.header {
    position:fixed;
    width:100%;
    top:0;
    left:0;
    background:blue;
    z-index:999;
}

Answer 2

Try separating the two classes in your css code with a space. From this:

.header.dark {
//fixed position
}

To this:

.header .dark {
// fixed position
}

I don't know what your code looks like but if you're trying to do something like this

<h1 class="three four">Double Class</h1>

then your css would look like this

.three.four { color: red; }

But if you're trying to do something like this

<div class="header">
<div class="dark">Stay at top</div>
</div>

then your css would look like this

.header .dark { position:fixed; }