Personal Portfolio Webpage

Hey! I have trouble with my navbar, I want it to change background when i hover on, it does but not the whole height and with of nav.

Personal Portfolio

.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: var(–color3);
display: flex;
justify-content: flex-end;
align-items: center;
z-index: 10;
box-shadow: 0 2px rgba(26, 26, 26, 60%);
height: 8vh;

.ul-list {
list-style-type: none;
display: flex;
margin: 0;
padding: 0;
overflow: hidden;

.ul-list a {
display: block;
margin: 0 3rem;

li a {
display: block;
text-decoration: none;
font-size: 18px;
color: var(–color2);
font-weight: 700;
position: relative;

li a:hover {
background-color: var(–color4);

I also have tried solutions from forums, like :
li a:hover::before {
position: absolute;
content: ‘’;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
display: block;}

Thanks for helping!

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.