Currently working on designing a navigation bar for a website and facing an issue with the placement of the search component icon as the resolution decreases slightly. The design seems to work well at 1080p resolution on tablets or mobile screens, but when it shrinks, the search icon is not aligning properly with the search box in the navbar. Any suggestions on how to fix this would be greatly appreciated. Thank you. Note: Utilizing Bootstrap 4.5 library for the design.
/* ... */
/* 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>