I created a search box using CSS grid that is supposed to shrink when the page is resized. However, it doesn't seem to shrink as much as I expected it to.
Here is how it appears when fully extended: https://i.stack.imgur.com/tPuCg.png And here is how it looks when the page is shrunk: https://i.stack.imgur.com/8vnj5.png
Navbar.styling
* {
margin: 0;
}
ul {
list-style: none;
display: flex;
}
a {
text-decoration: none;
color: #fff;
}
.homeBtn {
height: 55px;
text-align: center;
justify-content: center;
padding: auto;
}
#nav-bar {
background-color: #888888;
overflow: hidden;
}
.container {
display: grid;
grid-template-columns: 1fr 6fr 1fr;
align-items: center;
}
ul li a {
padding: 1.6rem;
font-weight: bold;
}
.form-control {
background-color: rgb(255, 255, 255);
border-color: rgb(133, 133, 133);
border-top-left-radius: 5px !important;
border-bottom-left-radius: 5px !important;
height: 38px;
width: 90%;
flex: auto;
border: none;
padding-left: 10px;
justify-content: center;
}
.homeBtn {
background-color: #00ce7f;
}
.search {
padding-left: 10px;
}
.btn {
padding-right: 10px;
}
.ugh-buttons {
margin-right: 10px;
}
.icon-btn {
height: 40px;
width: 40px;
border-radius: 5px;
background-color: #00ce7f;
color: white;
border: none;
padding-left: 5px;
}
button:active {
outline: none !important;
box-shadow: none !important;
background-color: rgb(111, 0, 255);
}
button:active {
outline: none !important;
box-shadow: none !important;
background-color: rgb(111, 0, 255);
}
button:focus {
outline: none !important;
box-shadow: none !important;
}
button:hover {
cursor: pointer;
}
.searchBtn {
color: #fff;
background-color: #00ce7f;
height: 38px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
width: 40px;
border: none;
font-weight: bold;
}
.buttons {
color: #fff;
background-color: #00ce7f;
height: 38px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
text-align: center;
width: 40px;
border: none;
font-size: large;
font-weight: bold;
}
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
appearance: none;
}
input {
outline: none;
}
Navbar.interactions
import React from 'react';
import { BsFillPersonFill } from 'react-icons/bs';
import { FiMail } from 'react-icons/fi';
import { FaPlus, FaSearch } from 'react-icons/fa';
import { AiTwotoneBell } from 'react-icons/ai';
import './navbar.css';
function Navbar() {
return (
<nav id="nav-bar">
<div className="container">
<h2 className="homeBtn">VIZZEY</h2>
<div className="search">
<input type="search" placeholder="Search" className="form-control" />
<button className="searchBtn">o</button>
</div>
<ul className="ugh-buttons">
<li className="btn">
<button className="icon-btn">lol</button>
</li>
<li className="btn">
<button className="icon-btn">lol</button>
</li>
<li className="btn">
<button className="icon-btn">lol</button>
</li>
<li className="btn">
<button className="icon-btn">lol</button>
</li>
</ul>
</div>
</nav>
)
}
export default Navbar;
Any suggestions on how to make the search bar shrink enough while keeping the button intact on the side?