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

user_19720750 0
Viewed 41

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.

css html
3 Answers

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>

user_164963570

Because of the flex it made the item long so the side of it went to the left when scaling. My solution was to use float instead of flex.

nav {

  padding: 30px;
  overflow: hidden;
  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;
  float: right;
}

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

nav a:hover {
  color: #b3d0ff;
  transform: scale(1.1);
}
<nav>
  <a id="logo" style="float:left; " 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>
after

user_38073650

Change:

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

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

To:

#logo {
    text-align: left;
}

nav a:hover {
    color: #b3d0ff;
    transition: 0.5s;
    font-size: 20px;
}

With transform you are moving the logo. I think with transition and font-size you can have what you want. I hope it helps

user_156065990
Related