I am sure others might have experienced the same problem, but not only am I new to CSS, English is also not my main language, and therefore I don’t really know how to go about researching on how to solve this issue. I don’t know what to call this situation. Basically, upon hover, the text slightly moves instead of staying where it belongs. I am assuming I am doing something wrong with paddings. But I know that it is possible to have this "button" effect, as in, the background color of the hover effect having that size, but I really can’t figure out a solution… I have been hours and hours trying different methods but no success. I am also not sure if I am styling the links properly. Can someone help please?
Here’s my navbar CSS code below:
.nav-items {
display: flex;
transform: translateX(0px);
margin-right: 5%;
}
.nav-items li {
list-style: none;
padding: 25px;
}
.nav-items a {
color: white;
text-decoration: none;
letter-spacing: 1px;
font-size: 14px;
}
.nav-items li a:hover {
background-color:#006aff;
padding: 20px;
transition: 0.2s ease-in-out;
}
>Solution :
As I can see you are adding the padding in the hover state.
Your code should be like this the way you have described you want to show the navigation items.
.nav-items a {
color: white;
text-decoration: none;
letter-spacing: 1px;
font-size: 14px;
padding: 20px;
transition: 0.2s ease-in-out;
}
.nav-items li a:hover {
background-color: #006aff;
}