Mark Mark - 6 months ago 8
CSS Question

Issue with hover not filling height of navbar

I'm having a hard time getting the background-color to go to the top of the navbar when hovered over. As of now it only highlights a little more than the text. Is there something simple I'm missing? I put a jsfiddle below to help show it.

HTML

<nav>
<ul>
<li><h1><a id="nav_logo" href="/index.php">This is a Test</a></h1></li>
<li><a class="nav_link" href="/index.php">Home</a></li>
<li><a class="nav_link" href="/pages/about.php">About</a></li>
<li><a class="nav_link" href="#">1</a></li>
<li><a class="nav_link" href="#">2</a></li>
<li><a class="nav_link" href="#">3</a></li>
<li><a class="nav_link" href="#">4</a></li>
<li><a class="nav_link" href="#">5</a></li>
</ul>
</nav>


CSS

nav ul{
list-style: none;
background-color: #333;
padding: 0.8125rem;
}

nav li{
display: inline-block;
}

nav a{
text-decoration: none;
color: white;


}

#nav_logo{
color:#FEBC11;
background-color: #333;
}

.nav_link{
padding-left: 2rem;
}

nav li a:hover{
background-color: black;
}


https://jsfiddle.net/mhLjav1a/3/

Answer

This happened because you gave padding-left to .nav_link and the background take the padding area as a part of element. you can change that by many ways :

1- you can change the padding-left to margin-left

2- you can use background-clip:content-box which will make the background ignoring the padding

background-clip: content-box;

https://jsfiddle.net/mhLjav1a/6/