thedivkiller thedivkiller - 4 days ago 5
CSS Question

Unexpected navigation bar moving on hover

I am trying to fix this navigation menu few hours.. but I am not sure where the problem is with the hover effect. Maybe the padding is the problem but may I ask you to guide me how to solve the problem ?

I want to accomplish this effect on hover but when I hover the navigation item all others are moving.
enter image description here

Here is my code example.



body { background: #000; }
.navigation {
float: right;
}
.navigation ul {
list-style: none;
}
.navigation ul li {
display: inline-block;
}
.navigation ul li a {
display: block;
font-family: "Rubik", sans-serif;
font-weight: 300;
font-size: 17px;
color: #fff;
line-height: 64px;
text-decoration: none;
padding: 8px 15px;
}
.navigation ul li a:hover {
color: red;
border: 1px solid #fff;
border-radius: 22px;
width: 165px;
}

<nav class="navigation">
<ul>
<li><a href="#">Features</a>
</li>
<li><a href="#">Blog</a>
</li>
<li><a href="#">Support</a>
</li>
<li><a href="#">Get Sellr Now</a>
</li>
</ul>
</nav>




Answer

You appear to add border on hover. border is part of the layout and effects dimensions.

One way to fix this is to add a transparent border of the same size to the non-:hover rule:

.navigation ul li a {
  border: 1px solid transparent;
}

You also set width on :hover which, of course, also affects layout.

I suspect what you want is:

.navigation ul li a {
  display: block;
  font-family: "Rubik", sans-serif;
  font-weight: 300;
  font-size: 17px;
  color: #fff;
  line-height: 64px;
  text-decoration: none;
  padding: 8px 15px;
  border: 1px solid transparent;
  border-radius: 22px;
}
.navigation ul li a:hover {
  border-color:#fff;
}
Comments