Content hiding behind nav bar

HTML-CSS
1

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

2

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

3

yes but I’m looking for any alternative

4 
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.

2 Likes
5

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

1 Like
6

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.

2 Likes
7

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.

2 Likes
8

it is though,your pen is cool !

1 Like