How to keep other blocks still and not move in CSS when I do hover?

Question

body {
  background: #caa178;
}

.navbar {
  overflow: hidden;
  background-color: #605f5f;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 999;
}

.navbar a {
  display: block;
  color: #cdcdcc;
  text-decoration: none;
  padding: 30px;
  float: right;
  margin-right: 10px;
  postion: fixed;
}

.navbar a:hover {
  background: #3a3b3b;
  font-weight: 1000;
}

<!DOCTYPE>
<html>
<div class="navbar">
  <a href="#a">ABOUT ME</a>
  <a href="#a">MY WORK</a>
  <a href="#a">CONTACT ME</a>
</div>

</html>

I want to bold the words inside the buttons of the navigation bar when I hover over them, but I do not want to move the other 2 buttons slightly, what can I do to solve this? Thank you.

you are changing `font-weight` which will change size of the font which will affect the hovered div size — fedesc, Aug 08 '20 at 14:10
yes I know, is there a way to change font-weight but keep the other 2 non-hovered buttons in the navigation bar still? They will move slightly to compensate for the slight increased in size because of font weight and I dont want that — how2code, Aug 08 '20 at 14:11
https://stackoverflow.com/questions/556153/inline-elements-shifting-when-made-bold-on-hover .. this will help — devd, Aug 08 '20 at 14:22

score 2 · Accepted Answer · answered Aug 08 '20 at 14:29

You can either assign fixed widths to the a elements in your menu or you can use a monospace font:

body {
  background: #caa178;
}

.navbar {
  overflow: hidden;
  background-color: #605f5f;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 999;
}

.navbar a {
  display: block;
  color: #cdcdcc;
  text-decoration: none;
  padding: 30px;
  float: right;
  margin-right: 10px;
  font-family: monospace;
}

.navbar a:hover {
  background: #3a3b3b;
  font-weight: 1000;
}

<html>
<div class="navbar">
  <a href="#a">ABOUT ME</a>
  <a href="#a">MY WORK</a>
  <a href="#a">CONTACT ME</a>
</div>

</html>

Also note that you tried to apply position: fixed to the a elements which wouldn't work properly (they would overlap by default), which only doesn't apply because you have a typo in there ("postion: fixed").

How to keep other blocks still and not move in CSS when I do hover?

1 Answers1