I have been created hover effects to my top nav and footer nav in CSS. However for some reason the CSS applied to the bottom nav are showing but not the ones applied to the top nav. This is my HTML & CSS code. The links in the footer are changing to color grey on hover but the links in the header are not. Is there something I’m doing wrong in structuring the way CSS applies for the nav links in the header?
```
@font-face {
font-family: 'HelveticaPro';
src: url(/public/fonts/HelveticaNeueLTPro-LtCn.ttf) format('truetype');
}
* {
margin: 0;
padding: 0;
color: white;
}
body {
color: black;
font-family: 'HelveticaNeueLTPro-Cn', arial, sans-serif;
font-size: 11px;
text-transform: uppercase;
line-height: 1.5;
letter-spacing: 0.1em;
}
/* NAV CSS */
.header{
width:100%;
height: 100vh;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
nav{
width: 100%;
position: absolute;
top: 0;
left: 0;
padding: 20px 0px;
display: flex;
align-items: center;
justify-content: space-between;
text-decoration:none;
}
nav ul li {
list-style: none;
display: inline-block;
}
/* nav ul li a {
color: white;
} */
.logo{
width: 80px;
}
.left a{
margin-left: 20px;
color: white;
}
.right a{
margin-right: 20px;
color: white;
}
.back-video{
position:absolute;
right: 0;
bottom: 0;
z-index: -1;
}
@media (min-aspect-ratio: 16/9){
.back-video{
width: 100%;
height: auto;
}
}
@media (max-aspect-ratio: 16/9){
.back-video{
width: auto;
height: 100%;
}
}
.content{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
text-align: center;
}
.content h1{
font-size: 10vw;
color:white;
font-weight: bold;
margin: 0;
display: flex;
}
.content a{
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font-weight: 50;
display: inline-block;
border-bottom: 1px solid white;
color: white;
text-decoration:none;
font-size: 1.2vw;
}
/* Footer CSS */
footer{
margin-top: 30px;
padding-top: 10px;
padding-bottom: 10px;
/* background-color: black; */
}
.footer-content {
padding: 50px;
display: block;
display: flex;
justify-content:space-between;
align-items: center;
height: 80px;
width: auto;
}
.nav-footer{
margin: 0;
padding: 0;
border: 0;
height: 100%;
font: inherit;
font-size: 1vw;
vertical-align: baseline;
display: flex;
justify-content: flex-end;
}
.nav-footer-item a{
margin-right: 0;
margin-left: 1.875vw;
list-style: none;
color:black;
text-decoration:none;
}
.newsletter{
width: inherit;
height: inherit;
}
.newsletter img{
max-width:100%;
max-height:100%;
object-fit: contain;
}
/* Main Section CSS */
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;
padding: 20px;
}
figure {
margin: 0;
padding: 0;
position: relative;
text-align: center;
}
img {
max-width: 100%;
height: auto;
}
figcaption{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
text-align: center;
flex-direction: column;
justify-content: center;
font-size: 4vw;
display: flex;
}
/* Hover Effects CSS */
.right a:hover{
cursor: pointer;
color: grey;
}
.left a:hover{
color: grey;
cursor: pointer;
}
.nav-footer-item a:hover{
color: grey;
cursor: pointer;
}
``` <!-- Navbar -->
<div class="header">
<video autoplay loop muted plays-inline class="back-video">
<source src="videos/Screen Print Halftones Portraits _ a look into Unfinished Legacy.mp4" type="video/mp4">
</video>
<nav>
<ul>
<li class="left"><a href="#">Mens</a></li>
<li class="left"><a href="#">Womens</a></li>
<li class="left"><a href="#">Accesories</a></li>
</ul>
<a href="#">
<img src="images/dist.png" alt="Garment Dist." class="logo">
</a>
<ul>
<li class="right"><a href="#">Search</a></li>
<li class="right"><a href="#">Account</a></li>
<li class="right"><a href="#">Bag</a></li>
</ul>
</nav>
<div class="content">
<h1>Garment Dist.</h1>
<a href="#">Discover</a>
</div>
</div>
<!-- Footer -->
<footer>
<div class="footer-content">
<div class="newsletter">
<img src="images/dist.png">
</div>
<ul class="nav-footer">
<li class="nav-footer-item"><a href="#">Contact</a></li>
<li class="nav-footer-item"><a href="#">About Us</a></li>
<li class="nav-footer-item"><a href="#">Legal Notices</a></li>
<li class="nav-footer-item"><a href="#">Socials</a></li>
</ul>
</div>
</footer>I applied the following CSS to the bottom nav using its class selector for the elements and it worked just fine. So I did it the same way to create this effect to the top nav with the .right class links and no dice.
2
Answers
Found the answer, I just had to give the
navelement az-index:1to make the effects show. Because I believe the background-video in the header was in front of the nav and was causing the effects to be hidden.I tried out your html and saw that your div of class header that you have 2 sets of lists, one with list items of a class of left and another with right.
I’m assuming that you also want the class of left to change when hovered above so i suggest adding a class with left hover to your css to change the color like what ive added:
Let me know if this was helpful or if I interpreted what you need to fix incorrectly
Also I suggest that as you have a footer element you can use a header element with a class of navbar or sorts so your code will be more easily readable
Updated Answer
Seeing as my first solution didn’t work you can also try setting an initial color and a hover color for both right and left items in your css file