CODEWITHSUNDEEP
htmlcssweb
Nazar Potipaka
Nazar Potipaka

Reputation: 33

I have a problem with this navigation bar.All buttons are moving when mouse hover over it

When mouse hover over the button all of the buttons are moving

body{
padding:0px;
margin:0px;
font-family: Lato,Arial,sans-serif;
font-weight: bold;
font-size: 30px;
background-color: black;
text-transform: uppercase;
}
.container{
width:900px;
height: 30cm;
margin:0 auto;
background-color: black;
}

.nav{
text-align: center;
}

.nav div
{
background-color: white;
display: inline-block;
border: solid;
margin-left: 5px;
margin-right: 5px;
padding: 10px;
border-radius: 0 0 10px 10px;
transition: 0.2s;
}

.nav div:hover
{
padding-top: 25px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<nav class="container nav">
	<div>
		Other info
	</div>
	<div>
		main
	</div>
	<div>
		my projects
	</div>
</nav>
</body>
</html>

I've expected that only one button will move but it isn't. I need to write few word here because stackoverflow doesn't let me post this. Also sorry for my English if its bad.

Upvotes: 0

Views: 32

Answers (2)

Henfs
Henfs

Reputation: 5411

The buttons are siblings and sensible to changes of each other. If any sibling changes padding-top or padding-bottom, it will affect the others. They have the same parent and to change one button padding-top would change the parent height, affecting all the children (buttons).

Instead, in the hover you can use transform, like this:

.nav div:hover {
  transform: translateY(-25px);
}

Transform affects the element individually without changing anything around.

Upvotes: 1

Hamza Arab
Hamza Arab

Reputation: 152

You can do it like this

body{
padding:0px;
margin:0px;
font-family: Lato,Arial,sans-serif;
font-weight: bold;
font-size: 30px;
background-color: black;
text-transform: uppercase;
}
.container{
width:900px;
height: 30cm;
margin:0 auto;
background-color: black;
}

.nav{
text-align: center;
}

.nav div
{
background-color: white;
display: inline-block;
border: solid;
margin-left: 5px;
margin-right: 5px;
padding: 25px 10px 10px;
border-radius: 0 0 10px 10px;
transform: translateY(-25px);
transition: 0.2s;
}

.nav div:hover
{
  transform: translateY(-5px);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<nav class="container nav">
	<div>
		Other info
	</div>
	<div>
		main
	</div>
	<div>
		my projects
	</div>
</nav>
</body>
</html>

Upvotes: 0

Related Questions