CODEWITHSUNDEEP
htmlcss
thedivkiller
thedivkiller

Reputation: 81

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>

Upvotes: 0

Views: 4962

Answers (2)

Banzay
Banzay

Reputation: 9470

You need to set constant a width of items, and it's better to align text center to prevent item text jumping when mouse enters it

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;
  width: 165px;
  line-height: 64px;
  text-decoration: none;
  text-align: center;
  padding: 8px 15px;
  margin: 0;
  transition: all 0.5s ease;
  border: 1px solid transparent;
  border-radius: 20px;
}
.navigation ul li a:hover {
  color: red;
  border: 1px solid #fff;
  border-radius: 28px;
  width: 165px;
  text-align: center;
 
}
<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>

Upvotes: 1

Ouroborus
Ouroborus

Reputation: 16865

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;
}

Upvotes: 7

Related Questions