Nav Bar hidden underneath my Div Container - Can't bring it to front

Nav Bar hidden underneath my Div Container - Can't bring it to front
0

#1

I’m working on the portfolio project, and I’m having an issue I can’t figure out.

I’ve created a Navbar at the top that is locked on the screen, so it’s always at the top when you scroll down.

Then I created a place holder for 4 of my projects to put into my portfolio, currently in the form of an . However, when I scroll down, the pictures scroll over the nav bar, and it becomes unusable, for as long as I am on that part of the page.

I formated the pictures for my portfolio entries using Boostrap 4 and the classes ‘row’ and ‘col-x’. I’m pretty lost on how to fix this issue.

Here is the sample of my code, can anyone see any obvious reason this is happening? I’ve been searching for an answer but haven’t found anything online.


#2

Your images are not going to show because you are trying to use an image with an http:// url prefix instead of https://. Codepen uses https://. I checked the 3 images you are using and found the host allows linking to the https:// version, so just add the “s”.

I am not sure if this is the issue to which you are referring, but if not, then I am not understanding the problem you are seeing. Maybe someone else can help with this.


#3

give your .nav class a z-index of 1 or greater. i forked you and made a couple other changes but i think that was the big one. @rmdawson71 is right about that https on codepen thing as well.

here is my fork https://codepen.io/benjaminadk/full/EvvmKM/ dogs behave like they should and go under nav now :slight_smile:

ADDED: look into z-index. if you don’t know, it is just the layering of different elements. now, the caveat is that you need to declare a position (i think) to declare a z-index. Everything is supposed to have a z-index of 0 by default. Perhaps using fixed position makes CSS behave strangely. Anyhow hope this helps.


#4

Thank you so much! I’ve been tearing my hair out on this one.


#5

[This comment has been deleted]


#6

no problem happy to help. funny because i have a small site CSS Sandbox with a similar issue. i have to go back in and apply the exact advice i gave you. check out the site if you a couple minutes. i made it after two months of learning stuff here. there are a bunch of links for css resources and a few interactive games, a puzzle and of course the sandbox itself. i will go back as i have time and learn more. css is a pretty complex and powerful language the more i learn, hopefully someday my site will be a good resource for beginner coders.