Well this happens because a border occupies a space between the hovered element and the one below it. If there is no space for it to fit then it moves the elements so it fits between them.
You could use a transparent border for default state and then when hovering there is already space available for the border. ( see .first solution )
Or you could use a pseudo-element like :after for your border. You can make it with position:absolute so it doesn’t ‘occupy’ space so it doesn’t move your elements. See .second solution
ul.first li {
border-bottom: 10px solid transparent;
}
ul.first li:hover {
border-bottom-color: red;
}
ul.second li:hover:after {
content:'';
width: 100%;
height: 5px;
position: absolute;
background:red;
bottom: -5px;
left:0;
display: block;
}
ul.second li {
position:relative;
margin-bottom:5px;
}
<ul class="first">
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
</ul>
<ul class="second">
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
</ul>
enter code here`enter code here`
.nav-link { display: block; }
.n24{
margin-top: 2px;
padding: 14px 14px;
border-bottom: transparent 5px solid;
}
.n25{
margin-top: 2px;
padding: 14px 14px;
border-bottom: transparent 5px solid;
}
.n26{
margin-top: 2px;
padding: 14px 14px;
border-bottom: transparent 5px solid;
}
.n09{
margin-top: 2px;
padding: 14px 14px;
border-bottom: transparent 5px solid;
}
.nav-link { display: block; }
.n24:hover{
border-bottom: #00b3ee 5px solid;
}
.n25:hover{
border-bottom: #00b3ee 5px solid;
}
.n26:hover{
border-bottom: #00b3ee 5px solid;
}
.n09:hover{
border-bottom: #00b3ee 5px solid;
}
<nav class="navbar navbar-expand-lg navbar-dark fixed-top">
<a class="navbar-brand" href="#"><img src="img.png"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link n22" href="#" style="color: black; font-weight: bold; font-size: 15px">HOME<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link n23" href="#" style="color: black; font-weight: bold; font-size: 15px">ABOUT US</a>
</li>
<li class="nav-item">
<a class="nav-link n24" href="#" style="color: black; font-weight: bold; font-size: 15px">OUR SERVICES</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link n25" href="index7.html" style="color: black; font-weight: bold; font-size: 15px">
JOBS
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link n09" href="#" style="color: black; font-weight: bold; font-size: 15px">
CONTACT US
</a>
</li>
</ul>
</div>
</nav>
Try this code:
#navbarNavDropdown ul.navbar-nav {
display: block;
}
#navbarNavDropdown ul.navbar-nav li.nav-item {
margin-top: 7px;
}
#navbarNavDropdown ul.navbar-nav li.nav-item a {
border-bottom: transparent 5px solid;
display: inline-block;
padding: 14px 14px;
}
#navbarNavDropdown ul.navbar-nav li.nav-item a:hover {
border-bottom: #00b3ee 5px solid;
}
when i hover on one link other links displaces in navbar to a bit up as hovering creates a line (border bottom), is there any way to fix it.
`
.n24{
margin-top: 2px;
padding: 14px 14px;
}
.n25{
margin-top: 2px;
padding: 14px 14px;
}
.n26{
margin-top: 2px;
padding: 14px 14px;
}
.n09{
margin-top: 2px;
padding: 14px 14px;
}
.n24:hover{
border-bottom: #00b3ee 5px solid;
margin-top: 7px;
}
.n25:hover{
border-bottom: #00b3ee 5px solid;
margin-top: 7px;
}
.n26:hover{
border-bottom: #00b3ee 5px solid;
margin-top: 7px;
}
.n09:hover{
border-bottom: #00b3ee 5px solid;
margin-top: 7px;
}
<nav class="navbar navbar-expand-lg navbar-dark fixed-top">
<a class="navbar-brand" href="#"><img src="img.png"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link n22" href="#" style="color: black; font-weight: bold; font-size: 15px">HOME<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link n23" href="#" style="color: black; font-weight: bold; font-size: 15px">ABOUT US</a>
</li>
<li class="nav-item">
<a class="nav-link n24" href="#" style="color: black; font-weight: bold; font-size: 15px">OUR SERVICES</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link n25" href="index7.html" style="color: black; font-weight: bold; font-size: 15px">
JOBS
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link n09" href="#" style="color: black; font-weight: bold; font-size: 15px">
CONTACT US
</a>
</li>
</ul>
</div>
</nav>
Give the elements a border-bottom in their default state already, with the border-color set to transparent.
