Why is the first item moving to the left when I put the mouse over it?

August 11, 2022

I am new to programming and I wanted to make a navbar where a name is on the left of the navbar and the other navigation items are on the right. I put transfer:scale() effect on the items and all of them on the right side are working good, but the one on the left is moving to the left when the animation is happening. Pls help me how to fix it, so the navigation is not stretched to the left so it works like on the right side.

nav {
  display: flex;
  padding: 30px;
  overflow: hidden;
  justify-content: flex-start;
  background-color: lightblue;
}

nav a {
  line-height: 19px;
  transition-property: all;
  transition-duration: 0.5s;
  transition-timing-function: ease-in-out;
  transition-delay: 0s;
  text-decoration: none;
  color: black;
  font-family: "Goudy Old Style";
  padding: 0px 14px 0 14px;
}

nav a:not(#logo) {
  text-align: center;
}

nav a:hover {
  color: #b3d0ff;
  transform: scale(1.1);
}

<nav>
  <a id="logo" style="flex:1" href="index.html">Hidden Logo</a>
  <a href="en.html">EN</a>
  <a href="#contact">CONTACT</a>
  <a href="#portfolioo">PORTFOLIO</a>
  <a href="#about">ABOUT</a>
  <a href="index.html">HOME</a>
</nav>

Sorry for the messy code.

>Solution :

From MDN:

The scale() CSS function defines a transformation that resizes an element on the 2D plane. Because the amount of scaling is defined by a vector, it can resize the horizontal and vertical dimensions at different scales. Its result is a data type.

With this said, you have flex: 1; on the first child meaning the amount of scaling is increased because of the horizontal dimensions at different scales.

Solution:

Remove flex: 1; and use margin-left: auto; on the second a as an alternative.

nav {
  display: flex;
  padding: 30px;
  overflow: hidden;
  justify-content: flex-start;
  background-color: lightblue;
}

nav a {
  line-height: 19px;
  transition-property: all;
  transition-duration: 0.5s;
  transition-timing-function: ease-in-out;
  transition-delay: 0s;
  text-decoration: none;
  color: black;
  font-family: "Goudy Old Style";
  padding: 0px 14px 0 14px;
}

nav a:nth-child(2) {
  margin-left: auto;
}

nav a:not(#logo) {
  text-align: center;
}

nav a:hover {
  color: #b3d0ff;
  transform: scale(1.1);
}

<nav>
  <a id="logo" href="index.html">Hidden Logo</a>
  <a href="en.html">EN</a>
  <a href="#contact">CONTACT</a>
  <a href="#portfolioo">PORTFOLIO</a>
  <a href="#about">ABOUT</a>
  <a href="index.html">HOME</a>
</nav>