Content hiding behind nav bar

https://codepen.io/advitya-sharma/pen/gOaJZgj

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
https://codepen.io/sobadrdb/pen/bGVzwBp

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