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.
Also,. you can make the 50px to something smaller if you want less space; but, typically you want a natural space there.
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.
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.
it is though,your pen is cool !