I’m currently learning the flexbox CSS concept, and I’m trying to create a navbar with it.
I want to make my search bar like
this
And this is the picture of what I’m working on
here
This is my html code
@font-face {
font-family: "campton-bold";
src: url(fonts/campton-cufonfonts/CamptonBold.otf) format("opentype");
}
@font-face {
font-family: "campton-light";
src: url(fonts/campton-cufonfonts/CamptonLight.otf) format("opentype");
}
@font-face {
font-family: "campton-medium";
src: url(fonts/campton-cufonfonts/CamptonMedium.otf) format("opentype");
}
* {
margin: 0;
padding: 0;
}
a img {
width: 40px;
}
nav {
background-color: #003466;
display: flex;
justify-content: space-around;
padding: 10px 0;
height: 50px;
align-items: center;
}
nav .btn-icon {
display: flex;
width: 20%;
justify-content: space-around;
/* background-color: black; */
}
nav .btn-icon a img {
transition: transform 0.2s;
}
nav .btn-icon a img:hover {
transform: scale(1.1);
}
.search-bar {
display: flex;
justify-content: center;
}
nav .search-bar input {
border-radius: 20px;
height: 35px;
width: 370px;
padding: 0 15px;
box-sizing: border-box;
font-family: campton-light;
outline: none;
border: none;
font-size: 15px;
}
nav .search-bar a {
text-decoration: none;
display: flex;
color: black;
align-items: center;
font-size: 20px;
}<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" />
<nav>
<div class="search-bar">
<input type="text" placeholder="Search" name="search" />
<a href="#"><i class="fa fa-search"></i></a>
</div>
<div class="btn-icon">
<div class="msg-icon">
<a href="#"><img src="img/message-01.png" alt="message" /></a>
</div>
<div class="upload-icon">
<a href="#"><img src="img/upload-01.png" alt="upload" /></a>
</div>
<div class="notif-icon">
<a href="#"><img src="img/bell-01.png" alt="notification" /></a>
</div>
<div class="btn-profile">
<a href="#"><img src="img/profile-01.png" alt="profile" /></a>
</div>
</div>
</nav>I hope you can help me, thank you
>Solution :
First Solution: design the outside/parent div
.search-bar {
background: #fff;
border-radius: 50px;
padding-right: 17px;
}
.fa.fa-search {
color: #003466;
}
@font-face {
font-family: "campton-bold";
src: url(fonts/campton-cufonfonts/CamptonBold.otf) format("opentype");
}
@font-face {
font-family: "campton-light";
src: url(fonts/campton-cufonfonts/CamptonLight.otf) format("opentype");
}
@font-face {
font-family: "campton-medium";
src: url(fonts/campton-cufonfonts/CamptonMedium.otf) format("opentype");
}
* {
margin: 0;
padding: 0;
}
a img {
width: 40px;
}
nav {
background-color: #003466;
display: flex;
justify-content: space-around;
padding: 10px 0;
height: 50px;
align-items: center;
}
nav .btn-icon {
display: flex;
width: 20%;
justify-content: space-around;
/* background-color: black; */
}
nav .btn-icon a img {
transition: transform 0.2s;
}
nav .btn-icon a img:hover {
transform: scale(1.1);
}
.search-bar {
display: flex;
justify-content: center;
}
nav .search-bar input {
border-radius: 20px;
height: 35px;
width: 370px;
padding: 0 15px;
box-sizing: border-box;
font-family: campton-light;
outline: none;
border: none;
font-size: 15px;
}
nav .search-bar a {
text-decoration: none;
display: flex;
color: black;
align-items: center;
font-size: 20px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="style2.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" />
</head>
<body>
<nav>
<div class="search-bar">
<input type="text" placeholder="Search" name="search" />
<a href="#"><i class="fa fa-search"></i></a>
</div>
<div class="btn-icon">
<div class="msg-icon">
<a href="#"><img src="img/message-01.png" alt="message" /></a>
</div>
<div class="upload-icon">
<a href="#"><img src="img/upload-01.png" alt="upload" /></a>
</div>
<div class="notif-icon">
<a href="#"><img src="img/bell-01.png" alt="notification" /></a>
</div>
<div class="btn-profile">
<a href="#"><img src="img/profile-01.png" alt="profile" /></a>
</div>
</div>
</nav>
</body>
</html>The second solution:- Set parent div position relative and move search icon with position absolute.
.search-bar {
position: relative;
}
.fa.fa-search {
position: absolute;
z-index: 999;
right: 10px;
}