I am a beginner student working on my very first project, so I appreciate your patience as I learn.
Currently, I am trying to add a hover effect to the navigation bar links where a blue bar appears at the top of the link and touches the border of the page.
The image above shows how it should look, while the image below displays my attempt at replicating it.
https://i.sstatic.net/27zbR.png
This is the code I have:
header {
display: flex;
flex-direction: row;
justify-content: space-between;
height: 79px;
}
header img {
padding: 30px 50px 30px 50px;
}
nav {
display: flex;
padding: 0 25px;
gap: 68px;
}
nav a {
display: inline-block;
color: black;
text-decoration: none;
gap: 68px;
margin-top: 9px;
border-block-start: 2px solid rgba(0, 0, 0, 0);
}
nav a:hover {
color: var(--main-color);
border-block-start: 2px solid var(--main-color);
}<header>
<img src="images/logo/logo.png" alt="Logo">
<nav>
<a href="">Accommodations</a>
<a href="">Activities</a>
</nav>
</header>Thank you for your assistance.