Hi everyone,
This is my first question on the forum. Hopefully, I have done everything correctly.
I completed the Tea Cozy project, except my z-index for the header is not working. My objective is to apply a z-index of 1 to the header so text & images don’t overlap as I scroll through the page. Code suggestions are much appreciated.
Relevant code
<header>
<div class="header-container">
<div class="logo">
<img src="./Resources/Images/img-tea-cozy-logo.png">
</div>
<nav>
<ul>
<li><a href="#">Mission</a></li>
<li><a href="#">Featured</a></li>
<li><a href="#">Tea</a></li>
<li><a href="#">Locations</a></li>
</ul>
</nav>
</div>
</header>
CSS
header{
position: fixed;
top: 0px;
left: 0px;
width: 100%;
z-index: 1;
}
.header-container{
display: flex;
border-bottom: 1px solid seashell;
margin: 0px 10px;
justify-content: space-between;
}
.logo {
margin-left: 10px;
height: 50px;
}
nav li{
display: inline-block;
text-decoration: underline;
padding-left: 15px;
margin-right: 20px;
}
nav a{
color:seashell;
}
nav a:hover{
color: yellow;
}
Scrolled text and image currently incorrectly appears behind the header.
