Why Navbar links are not responding to the transition applied on them

Question

body {
    font-family: sans-serif;
    font-size: 25px;
}
.navbar {
    width: 100%;
    height: auto;
    background-color: rgb(97, 77, 47);
}
ul {
    list-style-type: none;
    display: flex;
    justify-content: center;
}
li {
    padding: 10px 25px;
}
a {
    text-decoration: none;
    color: white;
    transition: 1s;
}
a:hover {
    transform: translate(50px,100px);
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <div class="navbar">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Projects</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </div>
</body>
</html>

I added the transition to my Navbar links to respond when hovered but the transition is not working . I want the links to translate when hovered and therefore I used transform: translate(50px,100px); but apparently it is not working. Don't know why

the default display property of anchor tag is inline.which does not support translate.. set the display property of tag as in line block.. it will work. — Masih Ansari, Sep 08 '20 at 07:04

score 0 · Accepted Answer · answered Sep 08 '20 at 07:02

Add display: block; to the links.

body {
    font-family: sans-serif;
    font-size: 25px;
}
.navbar {
    width: 100%;
    height: auto;
    background-color: rgb(97, 77, 47);
}
ul {
    list-style-type: none;
    display: flex;
    justify-content: center;
}
li {
    padding: 10px 25px;
}
a {
    text-decoration: none;
    color: white;
    transition: 1s;
    display: block;
}
a:hover {
    transform: translate(50px,100px);
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <div class="navbar">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Projects</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </div>
</body>
</html>

Edit: You can refer to this.

The element has to be a block or inline-block in order to apply `transform` property. `` is not an inline-block or block so you have to make it explicitly. — Debsmita Paul, Sep 08 '20 at 08:27

score 0 · Answer 2 · answered Sep 08 '20 at 07:15

0

The solution would be to add a display property to the links

a {
  text-decoration: none;
  color: white;
  transition: 1s;
  display: block;
}

The transform translate property will work with block level elements like a div for example.

answered Sep 08 '20 at 07:15

Renzo CJ

43
8

Jonatan · Answer 3 · 2020-09-08T07:31:05.870

Your "a" element is included into a "li" element, so you would probably have to focus on transforming the "li" not the "a". In css it is always important to consider that each element(tag or box) is always included into another one. So the key is to identify which one to modify and how much space is available. You can try something like below:

body {
    font-family: sans-serif;
    font-size: 25px;
}
.navbar {
    width: 100%;
    height: auto;
    background-color: rgb(97, 77, 47);
}
ul {
    list-style-type: none;
    display: flex;
    justify-content: center;
}
li {
    padding: 10px 25px;
}
a {
    text-decoration: none;
    color: white;
    transition: 1s;
}
li:hover {
  background-color: red;
  transform: translate(50px,100px);
}

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <div class="navbar">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Projects</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </div>
</body>
</html>

Why Navbar links are not responding to the transition applied on them

3 Answers3