change header view on small screen - html

Question

I have a header which looks like this :
I found an example of what I wan. On small screen i need the search bar to go underneath.:
The issue is that i have no idea how this is done. I tried changing the position to relative when i reach a certain screen width but this didn't help.
<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 dont need you to code it for me i'm fine doing that myself, I just have no clue how to go on about this.

Answer 1

One option would be to create two search bars in the same file. And hide one and show other depending on screen sizes.
Somthing like this:
<select class="for-desktop"> ... </select>
<select class="for-mobile"> ... </select>
Then CSS would look like following:
#media(max-width:768px){
.for-desktop{
display:none;
}
}
#media(min-width:768px){
.for-mobile{
display:none;
}
}
This way you don't need to think too much other stuff. This will simpy do it.
Other way is to use CSS-Grid for the Entire Header. And show the select on the bottom (Need to write some code efficiently)
You can do one quick hack also. Set position:relative on the parent and position:absolute; for the select only when screen size is smaller and adjust your select accordingly.
Something Like the below example.
.header {
position:relative;
}
.header__search {
position:absolute;
bottom: -60px;
left:0;
right:0;
}
(You may need to do small adjustments with positioning of search item)

Answer 2

If you are interested in a little css refactor, you can use CSS grid to change the position of this search bar
For more info i would recommend this link
Cheers!
-- UPDATE ---
if not, you can hide this bar when your screen side reach some point and then show a new "div" or a "copy" right below (I think it can be cool and
easier to create animations)
or even use javascript to append this element to the desired position