Content hiding behind nav bar

the content hides behind nav bar when I set position:fixed;

I tried position:sticky;top:0;left:0;
but the problem is there is some space left on the top after using sticky even with top :0;

Currently I’m thinking to use margin-top for content under navbar

Yes, margin-top: ... will do the job for you.

yes but I’m looking for any alternative

margin-top: 50px;

Is one solution as stated before, but this works too:

position: relative;
top: 50px;

You should try to add class names to all your elements. If not to the elements themselves,. at least to a wrapper element (or its parent element).

As it stands now, you’ll have to do p {... } which will affect all p tags on page, including future ones. Which is bad.

1 Like

Also,. you can make the 50px to something smaller if you want less space; but, typically you want a natural space there.

1 Like

One final thing… because you’re probably going to ask. Add

z-index: 100;

to your #navbar if you want the text to go underneath it.

z-index affects elements with the position property on them and the higher the number, the higher that element is on the stack.

So if you had 2 pieces of paper, the paper with the higher z-index would be on top of the other paper. The default value is 0. So another trick is to give the other element a z-index of -1.

1 Like

hi @Advitya-sharma

i know its not portfolio page, but might have same problem before with the content behind navbar or anything set to position fixed.

heres my pen

sorry cant type the single tick, still messing with my keyboard layout. missing it.

1 Like

it is though,your pen is cool !

1 Like