Looking for help with adjusting my header design on small screens:
I want the search bar to go underneath on smaller screens, like this example:
I've tried changing the position to relative at a certain screen width but it didn't work.
<div className="header">
<div className="header__logo">
<img src={logo} alt=""></img>
</div>
<div className="header__search">
<SearchBar />
</div>
<div className="header__right">
<FiUser className="header__icon" />
<Cart />
</div>
</div>
/*
header
*/
.header {
width: 100%;
height: 60px;
border-bottom: 1px solid #e4e4e4;
display: flex;
justify-content: center;
}
.header__logo {
width: 120px;
height: 60px;
line-height: 65px;
}
.header__logo img {
width: 120px;
background-size: contain;
}
.header__search {
width: 50%;
height: 60px;
line-height: 60px;
margin: 0 20px 0 20px;
text-align: center;
}
.header__right {
width: 120px;
height: 60px;
line-height: 60px;
display: flex;
justify-content: space-between;
}
.header__icon {
height: 30px;
width: 30px;
margin-top: 15px;
cursor: pointer;
}
I'm capable of coding it myself, just need guidance on how to achieve this. Any help is appreciated!