How can I create a top bar that resembles the design of Google Play?
https://i.sstatic.net/tdLVz.png
I am struggling to make the input box flexible and fit the window size...
The minimum width of Div.search is set to 250px but it's not working. Can someone help?
*{
box-sizing: border-box;
}
.topbar{
position: fixed;
top: 0;
left: 0;
width: 100%;
min-width: 900px;
height: 60px;
background-color: #FFFFFF;
border-bottom: 1px solid #C7C7C7;
}
.menu{
position: absolute;
top: 15px;
left: 30px;
width: 30px;
heigth: 30px;
background-color: #777777;
}
.logo{
position: absolute;
top: 10px;
left: 70px;
width: 100px;
height: 40px;
background-color: #80DF5F;
}
.search{
flex: 0 2 auto;
position: relative;
margin: 15px 0px 0px 200px;
padding-right: 50px;
min-width: 250px;
width: 700px;
height: 30px;
background-color: #2A77FF;
}
.search input{
display: block;
width: 100%;
}
.btn{
position: absolute;
top: 0;
right: 0;
width: 50px;
height: 30px;
background-color: #FF3B3B;
}
.chat{
position: absolute;
top: 15px;
right: 20px;
width: 100px;
height: 30px;
background-color: #FFC536;
}<div class="topbar">
<div class="menu">=</div>
<div class="logo">Logo</div>
<div class="search">
<input type="text">
<div class="btn">button</div>
</div>
<div class="chat">C</div>
</div>