CODEWITHSUNDEEP
htmlcss
Victoria Dinico
Victoria Dinico

Reputation: 11

Navbar is jumping

When any of the links in the menu is hovered the whole bar just jumping, I can'r figure out what to do((

here is css code, sorry if it's messy, im new to this.

.nav{
    margin: 0;
    padding: 0;
    text-align: center;
    padding-right: 48px;
    padding-top: 12px;
}

.nav li{
    display: inline;
}

.nav a{
    display: inline-block;
    padding: 10px;
}

a {
    color: #fff;
    font: 25px/1 Courier New, monospace;
    text-decoration: none;
    width: 15%; 
    vertical-align: middle;
}

a:link {color: #fff; text-decoration: none; font-weight: normal;}
a:visited {color: #fff; text-decoration: none; font-weight: normal;}
a:active {color: #fff; text-decoration: none;}
a:hover {font-family: Courier; color: #600080; text-decoration:none; font-weight: none;text-transform: uppercase; position: sticky;}
a:hover { font-size: 215%; }

Upvotes: 1

Views: 39

Answers (1)

jerrylow
jerrylow

Reputation: 2629

The cause of the problem is this here:

a:hover {
  font-size: 215%;
}

As your font-size increases it makes the a element larger which makes your li and nav larger. There's various ways you can address this problem. One of the easiest way is to accommodate for the growth of a. If you inspect the element on hover the element becomes 122px (in my example). If I set a min-height the larger a size is accommodate for and "shifting" won't occur:

a {
  min-height: 130px;
}

Now this may not work for you if your links are either dynamic or translatable. You could use scale rather than increasing the font-size which makes the element grow in place without pushing it's parent's dimension:

a:hover {
  transform: scale(2.15);
} 


body {
  background: #333;
}

.nav {
  margin: 0;
  padding: 0;
  text-align: center;
  padding-right: 48px;
  padding-top: 12px;
}

.nav li {
  display: inline;
}

.nav a {
  display: inline-block;
  padding: 10px;
}

a {
  color: #fff;
  font: 25px/1 Courier New, monospace;
  text-decoration: none;
  width: 15%;
  vertical-align: middle;
}

a:link {
  color: #fff;
  text-decoration: none;
  font-weight: normal;
}

a:visited {
  color: #fff;
  text-decoration: none;
  font-weight: normal;
}

a:active {
  color: #fff;
  text-decoration: none;
}

a:hover {
  font-family: Courier;
  color: #600080;
  text-decoration: none;
  font-weight: none;
  text-transform: uppercase;
  position: sticky;
}

a:hover {
  transform: scale(2);
}
<ul class="nav">
  <li><a href="">Nav Link One</a></li>
  <li><a href="">Nav Link Two</a></li>
  <li><a href="">Nav Link Three</a></li>
  <li><a href="">Nav Link Four</a></li>
</ul>

Upvotes: 1

Related Questions