Alex M. Alex M. - 15 days ago 5
CSS Question

Header not showing up on pages other than main page

So, I have a header on the main page of my site. It's perfectly aligned and everything's good, but, when I go to any other page, the header disappears. I've tried it with and without position:fixed, but it still disappears. The space where it should be is still there, but the header itself is invisible, I guess.

I have another div that stays between pages, so I don't know what could possibly be the issue. I've compared the two CSS codes, but the only differences are positions, colors, sizes, etc.

This is the CSS for the header:

.bar {
margin-top:-810px;
margin-left:300px;
width:1075px;
height:60px;
background-color:#b0b0b0;
font-size:16px;
color:#e7e55a;
text-align:center;
line-height:60px;
font-family: 'Coming Soon', cursive;
position:fixed;
z-index:1;
}


And this is the CSS of the other div that stays in place:

#tra img {
width: 225px;
height: auto;
margin-top:60px;
margin-right:0px;
transform:rotate(-55deg);
z-index:1;


}

Since the second div is an image, I guess that could be why it stays in place, but I'm really not the best at coding, so any help is appreciated.

Also, I've tried the code without z-index, but it still didn't work.

Answer

If you using position fixed use top, left, bottom and right to position your elements. Don't use margin.

.bar {
    top: 0;
    left: 300px;
  
    width:1075px;
    height:60px;
    background-color:#b0b0b0;
    font-size:16px;
    color:#e7e55a;
    text-align:center;
    line-height:60px;
    font-family: 'Coming Soon', cursive;
    position:fixed;
    z-index:1;
}
<div class="bar"></div>

Comments