0

I've tried almost every different combination of positions on my elements. I have only been web coding for around a month and a half so I'm sure its something super obvious but I can't get the fixed nav-bar to appear in front of the background Images. Especially with the #toggle:checked when it pops down for mobile, the nav links aren't visible since they are behind the images. here is my codepen for the project

.nav{
  background: rgba(48, 48, 48, 0.738);
  border-bottom: 1px solid black;
  text-align: right;
  height: 70px;
  line-height: 70px;
  position: fixed;
  width: 100%;
  z-index: 10000;
}

.menu{
  margin: 0 30px 0 0;
  z-index: 10000;
}

.menu a {
  text-decoration: none;
  color: white;
  margin: 0 10px;
  line-height: 70px;
}

https://codepen.io/gogocodesmedia/full/mobJZP

Please help!

Mason Gogolinski
  • 11
  • 1
  • add `z-index` to `.pimg1` class – Vitorino fernandes Feb 24 '19 at 17:21
  • @Mason Gogolinski Please can you add your HTML section to your question. To make it more easy to get the right answer. – Cocest Feb 24 '19 at 17:27
  • Very sorry for any inconvenience. I solved my own issue. Turns out I had the nav div inside my first image div in my html. As i suspected it was a beginner mistake. If someone could take this down that would be awesome! – Mason Gogolinski Feb 24 '19 at 17:27
  • Your navbar looks fine to me in your example. I can see the links on the right side, and the translucent black bar, on top of all other content. What web browser are you using? – Nikolas Stevenson-Molnar Feb 24 '19 at 17:30
  • @Mason Gogolinski Note: z-index only works on positioned elements (position:absolute, position:relative, or position:fixed) – Cocest Feb 24 '19 at 17:30
  • Possible duplicate of [All About.... Z-Index?](https://stackoverflow.com/questions/2305669/all-about-z-index) – JasonB Feb 24 '19 at 17:44

0 Answers0