Search bar CSS not positioning it correctly

user_14560566 0
Viewed 142

I am trying to create a website. In which there is an animated search bar which I got from youtube. I am trying to use flexbox for my navbar and everything works except for the position of my search bar. The picture of my nav bar until now.Navbar

and this the code for my html and css some of it is cut out.

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://kit.fontawesome.com/20c0c25f7c.js" crossorigin="anonymous"></script>
    <title>HTML Elements Reference</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="favicon.ico">
    <style>
        body{
            font-family: Helvetica, sans-serif;
            background: black;
            margin: 0;
            padding: 0;
        }
        .container{
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-direction: row;
            width: 100%;
        }
        .search-box{
            display:inline-block;
            transform: translate(0%, -50%);
            background: #2f3640;
            height: 40px;
            border-radius: 40px;
            padding: 10px;
        }  
        .search-box:hover > .search-txt {
            width: 240px;
            padding: 0 6px;
        }
        .search-box > .search-btn {
            background: black;
        }
        .search-btn{
            color: #53e3f8;
    float: left;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #2f3640;
    display: flex;
    justify-content: center;
    align-items: center;
}
.search-txt{
    border: none;
    background: none;
    outline: none;
    float: right;
    padding: 0;
    color: white;
    font-size: 16px;
    transition: 0.4s;
    line-height: 40px;
    width: 0px;
}

    </style>
</head>
<body>
    
    <nav class="container">
        <div class="search-box">
            <input class= "search-txt" type="test" name="" placeholder="Search...">
            <a class="search-btn" href="#"><i class="fas fa-search"></i></a>
        </div>
    </nav>

</body>
</html>

Can you help me out with the CSS and HTML and try not to use margin property for the search bar. I would like the search bar to be fully centered in my flexbox.

searchbar css html
1 Answers

As mdn says:

The translate() CSS function repositions an element in the horizontal and/or vertical directions. Its result is a data type.

So it is necessary just remove property transform: translate(0%, -50%); to place correctly your searchbar:

.search-box{
  display:inline-block;  
  background: lightseagreen;
  height: 40px;
  border-radius: 40px;
  padding: 10px;
}

An example:

body{
  font-family: Helvetica, sans-serif;
  margin: 0;
  padding: 0;
}
.container{
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  width: 100%;
}




.search-box{
  display:inline-block;  
  background: lightseagreen;
  height: 40px;
  border-radius: 40px;
  padding: 10px;
}

.search-box:hover > .search-txt {
  width: 240px;
  padding: 0 6px;
}
.search-box > .search-btn {
  background: lightgreen;
}
.search-btn{
  color: #53e3f8;
float: left;
width: 40px;
height: 40px;
border-radius: 50%;
background: lightpink;
display: flex;
justify-content: center;
align-items: center;
}
.search-txt{
border: none;
background: none;
outline: none;
float: right;
padding: 0;
color: white;
font-size: 16px;
transition: 0.4s;
line-height: 40px;
width: 0px;
}
<nav class="container">
    <div class="search-box">
      <input class="search-txt" type="test" name="" placeholder="Search...">
      <a class="search-btn" href="#"><i class="fas fa-search"></i></a>
    </div>
  </nav>

UPDATE:

When you use double percentage values transform: translate(0%, -50%); in translate function, then the second value is for the height of the reference box:

This value describes two or values representing both the abscissa (x-coordinate) and the ordinate (y-coordinate) of the translating vector. A percentage as first value refers to the width, as second part to the height of the reference box defined by the transform-box property.

user_16462400
Related