Product Landing Page - Build a Product Landing Page

HTML-CSS
1

Tell us what’s happening:

My header image seems to be hidden behind the nav-bar element, and I’m not sure how to fix it.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Hats for Cats</title>
  <link rel="stylesheet" href="styles.css">
  <meta charset="utf=8">
</head>
<body>
  <header id="header">
     <nav id="nav-bar">
       <img src="https://beta.aspendiscovery.org/WebBuilder/ViewImage?size=full&id=2347" id="header-img">
      <ul>
        <li><a href="#all-hats" class="nav-link">Shop All Hats</a></li>
        <li><a href="#browse" class="nav-link">Browse by Category</a></li>
        <li><a href="#sale" class="nav-link">Sale</a></li>
        <li><a href="about-us" class="nav-link">About Us</a></li>
        </ul>
    </nav>
  </header>
<section id="form">
</section>
<section id="video">
</section>
<section id="gallery">
  <img src="https://m.media-amazon.com/images/I/71ODFNtaApL._AC_UF1000,1000_QL80_.jpg">
</section>
</body>
</html>

/* file: styles.css */
#header-img {
max-height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  float: left;
  display: inline-block;
}

nav > ul { 
  list-style-type: none;
  margin: 0px;
  padding-top: 0px;
  padding-bottom: 0px;
  padding-left: 0px;
position: fixed;
  top: 0;
  width: 100%;
  height: 60px;
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  align-items: center;
  background-color: #6c8e1b;
}

li {
  font-family: sans-serif;
}

li a {
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #111;
}

nav {
background-color:#6c8e1b;
  margin: 0;
  padding: 0;
}

header {
  display: flex;
  justify-content: space-between;
align-items: left;
height: 70px;
  position: fixed;
  top: 0;
  background-color: #6c8e1b;
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36

Challenge Information:

Product Landing Page - Build a Product Landing Page

2

Welcome to our community!

Add z-index property set to the value od -1 to your selector nav > ul selector:

1 Like
3

Thank you so much, DobarBREND! I hope one day I can get good enough to help others in the community too. :slight_smile:

Adding that z-index property helped! Thanks for providing the link so I can read more about it.

I’m having some new problems now with trying to center the li elements vertically in the navbar, but I’ll keep troubleshooting to see if I can figure it out.

Thanks again!

1 Like
4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.