Advertisements
I’m trying to add simple hover effect for my navbar that I used the help of bootstrap 5 in it. however, there should me a red line under my links that should be showed up when I hover on them but that’s not happening. here is my html and CSS code that I have written so far.
as you can see I used the after pseudo element to insert a small line under my anchor tags but it is not showing up at all I tried everything
* {
margin: 0;
padding: 0;
font-family: 'Reem Kufi Fun', sans-serif;
}
section {
background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), url(background.jpg);
min-height: 100vh;
width: 100%;
background-size: cover;
position: relative;
background-position: center;
}
#navbar {
background-color: transparent !important;
padding: 2% 6%;
}
a {
color: white !important;
}
#fsta {
font-size: 2em;
}
li {
padding-right: 2%;
position: relative;
display: inline-block;
list-style: none;
}
a::after {
content: "" !important;
height: 2px !important;
color: red !important;
margin: auto !important;
display: block !important;
width: 100% !important;
transition: 1s !important;
}
a:hover::after {
width: 100% !important;
cursor: pointer !important;
}<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>house</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
<link rel="stylesheet" href="app.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@400;500;600&family=Reem+Kufi+Fun:wght@400;500;700&display=swap"
rel="stylesheet">
</head>
<body>
<section>
<nav id="navbar" class="navbar navbar-expand-lg bg-light">
<div class="container-fluid">
<a id="fsta" class="navbar-brand" href="#">Rb Rooms</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0 justify-content-end flex-grow-1">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">BEDROOM</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">KITCHEN</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">DINNING</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">BACKYARD</a>
</li>
</ul>
</div>
</div>
</nav>
</section>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8"
crossorigin="anonymous"></script>
</body>
</html>>Solution :
You used color instead of background, and to make it work only on hover, you should hide it first then show it upon hover, such as by using display, opacity, or visibility, though since you want transition, opacity might be the best one.
* {
margin: 0;
padding: 0;
font-family: 'Reem Kufi Fun', sans-serif;
}
section {
background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), url(background.jpg);
min-height: 100vh;
width: 100%;
background-size: cover;
position: relative;
background-position: center;
}
#navbar {
background-color: transparent !important;
padding: 2% 6%;
}
a {
color: white !important;
}
#fsta {
font-size: 2em;
}
li {
padding-right: 2%;
position: relative;
display: inline-block;
list-style: none;
}
a::after {
content: "" !important;
height: 2px !important;
background: red !important;
margin: auto !important;
display: block !important;
width: 100% !important;
transition: 1s !important;
opacity: 0;
}
a:hover::after {
width: 100% !important;
opacity: 1;
cursor: pointer !important;
}<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>house</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
<link rel="stylesheet" href="app.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@400;500;600&family=Reem+Kufi+Fun:wght@400;500;700&display=swap"
rel="stylesheet">
</head>
<body>
<section>
<nav id="navbar" class="navbar navbar-expand-lg bg-light">
<div class="container-fluid">
<a id="fsta" class="navbar-brand" href="#">Rb Rooms</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0 justify-content-end flex-grow-1">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">BEDROOM</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">KITCHEN</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">DINNING</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">BACKYARD</a>
</li>
</ul>
</div>
</div>
</nav>
</section>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8"
crossorigin="anonymous"></script>
</body>
</html>