One Element in navbar affecting other elements when hovering

Question

In Navbar, One element is affecting other elements when hovering that element.

Like when I am hovering on that element, that element gets border around it and its shifting other elements of the navbar.

.navbar{
    height: 10vh;
    width:100vw;
    display: flex;
    justify-content: space-between;  
    background-color: #FF4858; 
}
.logo{
    /* border:1px solid black; */
    font-size: 5vh;
    margin:auto 2vw;
    font-weight: bold;
}
ul{
    list-style: none;
    display: flex;
    /* border:1px solid black; */
    justify-content: center;
    align-items: center;
    width:50%;
    /* justify-content: space-around; */
    
}
li{
    padding:10px;
    margin:0px 3vw;
    border:none;
}
li:hover{
    color:white;
    border:1px solid white;
    border-radius: 6px;
}

<nav class="navbar">
    <div class="logo">VC( Just Getting Started )</div>
    <ul>
        <a href="#"><li>Home</li></a>
        <a href="#"><li>Contact Us</li></a>
        <a href="#"><li>About Us</li></a>
        <a href="#"><li>More</li></a>
    </ul>
</nav>

Yes, border changes the size of the element and it affects the layout. As an option you can set a border with the background color and only change its color on hover — Ivan Beliakov, Dec 10 '22 at 17:54
Does this answer your question? [CSS hover border makes inline elements adjust slightly](https://stackoverflow.com/questions/8625812/css-hover-border-makes-inline-elements-adjust-slightly) — ATP, Dec 10 '22 at 17:55

score 0 · Answer 1 · answered Dec 10 '22 at 17:54

It happens because of the border size. use transparent border and when hovering change its color

.navbar{
    height: 10vh;
    width:100vw;
    display: flex;
    justify-content: space-between;  
    background-color: #FF4858; 
}
.logo{
    /* border:1px solid black; */
    font-size: 5vh;
    margin:auto 2vw;
    font-weight: bold;
}
ul{
    list-style: none;
    display: flex;
    /* border:1px solid black; */
    justify-content: center;
    align-items: center;
    width:50%;
    /* justify-content: space-around; */
    
}
li{
    padding:10px;
    margin:0px 3vw;
    border: 1px solid transparent;
}
li:hover{
    color:white;
    border-color: white;
    border-radius: 6px;
}

<nav class="navbar">
    <div class="logo">VC( Just Getting Started )</div>
    <ul>
        <a href="#"><li>Home</li></a>
        <a href="#"><li>Contact Us</li></a>
        <a href="#"><li>About Us</li></a>
        <a href="#"><li>More</li></a>
    </ul>
</nav>

One Element in navbar affecting other elements when hovering

1 Answers1