Fixed header bar issues

General
1

I am working on my portfolio project and I created a fixed header that scrolls with the page that contains three navigational buttons, everything works the way I want except when I scroll, some content passes behind the bar (as in I can’t see the content, which is what I want) and some content passes above the header bar (what I don’t want to happen) I’ve embedded a link to my portfolio if someone could please look through it. I apologize for the less than stellar design work, I’m just trying to get functionality first, then I want to get it to look good. Thank you for any help, and insight.

See the Pen Personal Portfolio webpage

2

Hi,

you can apply a z-index property to your bar.

.mynavbar {
z-index: 1
}

z index is like the layer it sits at. the higher the z-index the higher the layer.

3

Thank you so much, I’ve been trying to find out how to do exactly that. Thank you. A lesson I will definitely hold with me for a long time.

1 Like