I'm designing a navbar for a website I'm working on. I am having the problem that can be seen in the pictures. 1080p resolution works smoothly on tablet or mobile phone screens. but when the resolution starts to shrink a little, the search component icon in the navbar is not in the same plane as the search box. how can i solve this? thanks. Note: Im using bootstrap 4.5 library for designing.
/* ... */
/* Navbar Search */
.searchbar {
margin-bottom: auto;
margin-top: auto;
height: 60px;
background-color: #353b48;
border-radius: 30px;
padding: 10px;
}
.search_input {
color: white;
border: 0;
outline: 0;
background: none;
width: 0;
caret-color: transparent;
line-height: 40px;
transition: width 0.4s linear;
}
.searchbar:hover>.search_input {
padding: 0 10px;
width: 12rem;
caret-color: auto;
/* changed */
transition: width 0.4s linear;
}
.searchbar:hover>.search_icon {
background: white;
color: black;
/* #e74c3c */
}
.search_icon {
height: 40px;
width: 40px;
float: right;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
color: white;
text-decoration: none;
}
/* ... */<!DOCTYPE html>
<html lang="en">
<head>
<!-- ... -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- ... -->
</head>
<body>
<!-- ... -->
<nav>
<!-- ... -->
<li class="nav-item">
<div class="container h-100">
<div class="d-flex justify-content-center h-100">
<div class="searchbar">
<input class="search_input" type="text" name="" placeholder="Search...">
<a href="#" class="search_icon"><i class="fas fa-search"></i></a>
</div>
</div>
</div>
</li>
<!-- ... -->
</nav>
<!-- ... -->
</body>
</html>
Just add
display: flexto your class.searchbar. Or best way would be to useposition: absoluteto the search icon.