I have a navigation bar and I have added a red line at the bottom when any item in the list is hovered, but I want to move that red line below the title (e.g. "Services"), any idea how to achieve this?
I've added a small example in the codepen so you can easily inspect the HTML and CSS code
header {
background-color: lightblue;
padding-top: 1rem;
position: sticky;
top: 0;
display: flex;
align-items: center;
justify-content: space-around;
}
header nav {
min-width: 50%;
}
header nav ul {
margin: 0;
height: 100%;
list-style: none;
padding-left: 0;
display: flex;
align-items: center;
justify-content: space-between;
}
header li:hover {
height: 100%;
border-bottom: 2px solid red;
}
<header>
<a href="/">
<p>Whatever logo</p>
</a>
<nav>
<ul>
<li>About us</li>
<li>Services</li>
<li>Pricing</li>
<li>Blog</li>
</ul>
</nav>
<a href="/">CONTACT</a>
</header>
View code link
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
I think just give all list elements the same height as the header.
like this:-
header { background-color: lightblue; padding-top: 1rem; height: 3rem; position: sticky; top: 0; display: flex; align-items: center; justify-content: space-around; } header nav { min-width: 50%; height : 100%; } header nav ul { margin: 0; height: 100%; list-style: none; padding-left: 0; display: flex; align-items: center; justify-content: space-between; } header li{ height: inherit; } header li:hover { border-bottom: 2px solid red; }Whatever logo
CONTACTYou can fix the title height, and you can also fix the height of the navigation bar items. Also, you have an issue where the li element moves when hovered. You can also solve this problem by always adding a transparent color border to the element so that the overall height of the element does not change on hover.
This is fixed CSS
header { background-color: lightblue; position: sticky; display: flex; height: 60px; align-items: center; justify-content: space-around; } header nav { min-width: 50%; } header nav ul { margin: 0; height: 100%; list-style: none; padding-left: 0; display: flex; align-items: center; justify-content: space-between; height: 60px; } header li { display: flex; align-items: center; border-bottom: 2px solid transparent; height: 60px; } header li:hover { border-bottom: 2px solid red; }https://codepen.io/swarajgk/pen/JjZewPo?editors=1100