CODEWITHSUNDEEP
htmlcss
Alex M.
Alex M.

Reputation: 37

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.

Upvotes: 3

Views: 638

Answers (1)

Rudi Urbanek
Rudi Urbanek

Reputation: 1953

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>

Upvotes: 2

Related Questions