We Keep Coding

Scroll animation on navbar wont work if below element is set to position absolute

I am creating a basic website for my family business in React and I have made a responsive navbar with a burger and scroll effect. So below my navbar is a cover photo which is getting pushed down every time the burger is clicked and the navigation list is revealed. When I give the cover a position:absolute; it wont get pushed, but the scroll effect wont work on the navbar anymore for some reason. note I am a beginner and this is my first real project. Below You will find my code:
Navbar component:
const Navbar = () => {
const [isClicked, setIsClicked] = useState(false)
const [sticky, setSticky] = useState(false)
useEffect(() => {
const handleScroll = () => {
setSticky(window.scrollY > 0);
};
window.addEventListener('scroll', handleScroll)
}, [])
return (
<nav className= {`navbar ${sticky? "sticky" : ""} ${isClicked && "activeNav"}`}>
<div className='logo'>
<img src={logo} alt = 'logo'/>
</div>
<div className='toggle-button' onClick={() => setIsClicked(!isClicked)}>
<span className={`bar ${isClicked && `active1`}`}></span>
<span className={`bar ${isClicked && `active2`}`}></span>
<span className={`bar ${isClicked && `active3`}`}></span>
</div>
<div className={`navbar-links ${isClicked && `active`}`}>
<ul>
<li><Link to='/'><p>O nama</p></Link></li>
<li><Link to='/'><p>Skola fudbala</p></Link></li>
<li><Link to='/'><p>Rodjendani</p></Link></li>
<li><Link to='/'><p>Kontakt</p></Link></li>
</ul>
</div>
</nav>
)
}
Navbar CSS:
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #052336;
color: white;
transition: 0.6s;
}
.navbar.sticky {
box-shadow: 0px 5px 10px rgb(0, 0, 0, 0.6);
position: sticky;
top: 0;
z-index: 100;
opacity: 0.9;
}
.logo img {
height: 50px;
width: 50px;
margin-left: 10px;
}
.navbar-links ul {
margin: 0;
padding: 0;
display: flex;
top: 9px;
position: relative;
}
.navbar-links li {
list-style: none;
}
.navbar-links li a {
text-decoration: none;
color: white;
padding: 0.8rem;
display: block;
font-size: 1.1rem;
transition:0.2s;
}
.navbar-links li a:hover {
color: #fecb40;
transform: scale(1.1);
}
.toggle-button {
position: absolute;
top: 1.5rem;
right: 1rem;
display: none;
flex-direction: column;
justify-content: space-between;
width: 30px;
height: 20px;
cursor: pointer;
}
.toggle-button .bar {
height: 3px;
width: 100%;
background-color: white;
border: 10px;
transition: .4s;
}
#media (max-width: 789px) {
.toggle-button {
display: flex;
}
.navbar-links {
display: none;
width: 100%;
transition: 1s;
}
.navbar {
flex-direction: column;
align-items: flex-start;
}
.navbar-links ul {
width: 100%;
flex-direction: column;
}
.navbar-links li {
text-align: center;
}
.navbar-links li a {
padding: .5rem 1rem;
}
.navbar-links.active {
display: flex;
}
.bar.active1 {
rotate: 45deg;
translate: 0px 10px;
}
.bar.active2 {
background: transparent;
translate: -45px 0px;
}
.bar.active3 {
rotate: -45deg;
translate: 0px -8px;
}
}
Cover component:
const Cover = () => {
return (
<section id='cover'>
<div className = 'header-text'>
<h1>Zlatna Lopta</h1>
</div>
</section>
)
}
cover css:
#cover {
position:absolute;
width: 100%;
height: 800px;
top: 0;
z-index: -1;
background-image: url(/src/Components/Images/cover1.jpg);
background-size: cover;
background-position: center;
}
.header-text {
margin: 0 auto;
color: white;
position:relative;
top: 35%;
padding: 70px 0;
text-align: center;
}
.header-text h1 {
font-size: 5rem
}

content shows off while scrolling in responsive hambuger responsive

I was finishing up creating this page using html and css after finishing up i was just checking the navigation menu in a mobile view and while scrolling down the menu the content of the page shows off and menu goes down and the content shows off
I want content not be shown while scrolling or not scrolling in the hamburger menu
code:
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#300&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
background-color: #2f2f42;
}
nav {
display: flex;
height: 90px;
width: 100%;
align-items: center;
justify-content: space-between;
padding: 0 50px 0 100px;
flex-wrap: wrap;
}
nav .logo {
font-size: 20px;
font-weight: bold;
color: teal;
}
nav ul {
display: flex;
flex-wrap: wrap;
list-style: none;
}
nav ul li {
margin: 0 5px;
}
nav ul li a {
color: rgb(92, 156, 92);
text-decoration: none;
font-size: 18px;
font-weight: 500;
padding: 8px 15px;
border-radius: 5px;
letter-spacing: 1px;
transition: all 0.3s ease;
}
nav ul li a.active,
nav ul li a:hover {
color: teal;
background-color: white;
}
nav .menu-btn i {
color: #fff;
font-size: 22px;
cursor: pointer;
display: none;
}
input[type="checkbox"] {
display: none;
}
#media (max-width: 1000px) {
nav {
padding: 0 40px 0 50px;
}
}
#media (max-width: 920px) {
nav .menu-btn i {
display: block;
}
#click:checked~.menu-btn i:before {
content: "\f00d";
}
nav ul {
position: fixed;
top: 80px;
left: -100%;
z-index: 9999;
/** ADDED **/
height: 100vh;
width: 100%;
text-align: center;
display: block;
transition: all 0.3s ease;
background-color: #2f2f42;
/** ADDED **/
}
#click:checked~ul {
left: 0;
}
nav ul li {
width: 100%;
margin: 40px 0;
}
nav ul li a {
width: 100%;
margin-left: -100%;
display: block;
font-size: 20px;
transition: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
#click:checked~ul li a {
margin-left: 0px;
}
nav ul li a.active,
nav ul li a:hover {
background: none;
color: teal;
}
}
.content {
position: relative;
background-color: #131314;
color: whitesmoke;
border: 5px solid grey;
border-radius: 12px;
width: auto;
height: 50rem;
margin-top: 1vw;
margin-left: 4vw;
margin-right: 4vw;
font-weight: bolder;
}
#media (max-width: 920px) {
.content {
display: block;
}
}
#media (max-width: 920px) {
.content #bor,
.det,
.clk {
display: block;
}
}
.bor {
justify-content: center;
text-align: center;
border-bottom: 0.7vw solid white;
}
.det {
display: inline-block;
margin-left: 1vw;
text-align: left;
border-bottom: 0.6vw solid whitesmoke;
}
.clk {
float: right;
width: fit-content;
height: fit-content;
margin-right: 1vw;
}
h2 {
box-sizing: border-box;
padding: 0.6vw;
margin: 0.8vw 0.8vw 0.8vw 0.8vw;
background-color: rgb(64, 80, 113);
text-align: left
}
#exp {
padding: 0.8vw;
margin: 0.8vw 0.8vw 0.8vw 1.9vw;
text-align: left;
}
footer {
background-color: rgb(104, 99, 25);
color: black;
margin: 15px;
padding: 15px;
border-radius: 8px;
}
#foo {
text-align: center;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" rel="stylesheet" />
<nav>
<div class="logo">Logo img</div>
<input type="checkbox" id="click">
<label for="click" class="menu-btn">
<i class="fas fa-bars"></i>
</label>
<ul>
<li><a class="active" href="#">Home</a></li>
<li>Services</li>
<li>About</li>
</ul>
</nav>
<div class="content">
<p class="bor"> this is content heading <br>
</p><br>
<span class="det">this is content side</span> <button class="clk">Watch</button><br><br>
<span class="det">this is content side</span><button class="clk">Watch</button><br><br><br>
<h2>this is demo</h2>
<p id="exp">this is content end</p>
</div>
<div id="foo">
<footer>
<p>Copyright © company 2022<br><br> All Rights Reserved</p>
</footer>
</div>

You could use JS to disable scroll when the menu shows up and enable when it's closed. Although, I don't understand why you wanted to use checkbox input for closing the menu. you could handle scrollbar like this
HTML
<label for="click" class="menu-btn" onclick={disableScroll()}>
<i class="fas fa-bars"></i>
</label>
<label for="click" class="close-btn" onclick={enableScroll()}>
<i class="fa-solid fa-xmark"></i>
</label>
Javascript
<script>
const disableScroll = () =>{
document.body.style.height = "100%";
document.body.style.overflow = "hidden";
document.querySelector("menu-btn").style.display = "none"
document.querySelector("close-btn").style.display = "block"
}
const enableScroll = () =>{
document.body.style.overflow = "auto";
document.querySelector("menu-btn").style.display = "block"
document.querySelector("close-btn").style.display = "none"
}
</script>

How do I convert a hover dropdown menu to a clickable sidebar dropdown menu on mobile?

I'm building a navigation menu on my website and I've ran into a problem regarding a dropdown sub-menu on mobile. On desktop, using w3Schools as a reference, I created a sub-menu that displays a ul on hover.
On mobile, however, I'm having two problems:
The first is that I want to be able to click to open the menu. I've tried to look into solutions for having a clickable menu toggle on mobile and a hover toggle on desktop, but I don't know much about javascript and wouldn't know where to start. I've also tried making the menu open by clicking on both desktop and mobile, but I would prefer if it was hoverable on desktop.
I also want the menu to display differently on mobile and tablet. I want it to be a block that spans the width of my popout sidebar rather than a popup as it is on desktop. I've tried to style the menu differently to make it fit my vision (almost like an accordion dropdown), but it opens over the top of my other list items. Instead, I want it to open and push down the list items.
Any help would be appreciated!
Here's my code (this version includes a click-to-open menu on desktop and mobile):
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function subOpen() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.sub-menu-link')) {
var dropdowns = document.getElementsByClassName("sub-menu-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
//Code for hamburger menu toggle
const menuBtn = document.querySelector(".menu-btn");
let menuOpen = !1;
menuBtn.addEventListener("click", () => {
menuOpen ? (menuBtn.classList.remove("open"), menuOpen = !1, document.documentElement.style.overflow = "scroll", document.body.scroll = "yes") : (menuBtn.classList.add("open"), menuOpen = !0, document.documentElement.style.overflow = "hidden", document.body.scroll = "no")
})
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #333;
background-color: #fff;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a {
text-decoration: none;
}
.header-cont {
display: flex;
max-width: 1350px;
margin: auto;
justify-content: space-between;
padding: 0 1rem 0 1rem;
box-sizing: border-box;
}
.header-cont,
.nav-link {
align-items: center;
}
.header-nav,
.nav-item {
height: 60px;
}
.header {
background: #fff;
box-shadow: 0 0 10px -3px rgb(0 0 0 / 50%);
}
.header-cont {
display: flex;
max-width: 1350px;
margin: auto;
justify-content: space-between;
padding: 0 1rem 0 1rem;
box-sizing: border-box;
}
.nav-link,
.sub-menu-link {
padding: 0 1rem 0 1rem;
font-weight: 600;
color: #0f0f0f !important;
cursor: pointer;
}
.sub-menu-link:after {
position: absolute;
right: 15px;
content: "⌃";
font-size: 15px;
border: none;
transform: rotate(180deg);
visibility: hidden!important;
}
.header-menu {
margin-right: 20px;
}
.header-menu li:last-child {
margin-bottom: 0;
padding-bottom: 0;
}
.only-mobile {
display: none !important;
}
.nav-item,
.nav-link {
display: inline-block;
}
.nav-item {
line-height: 60px;
}
.drop-chevron {
margin-left: 10px;
height: 13px;
fill: #0f0f0f;
}
.nav-item:hover svg {
fill: #00007a !important;
}
.nav-item:hover {
background-color: #00007a0d;
transition: background-color 0.3s;
}
.nav-link:hover,
.sub-menu-link:hover {
color: #00007a !important;
transition: 0.3s;
text-decoration: none !important;
}
.sub-menu {
position: relative !important;
}
.sub-menu-link {
display: inline-block !important;
text-decoration: none !important;
}
#check,
.checkbtn {
display: none;
}
.sub-menu-content {
display: none;
margin-top: -0.1rem;
background-color: #fff !important;
box-shadow: 0 6px 14px -1px rgb(0 5 20 / 15%);
border-radius: 3px;
overflow: hidden;
position: absolute;
width: 200px;
z-index: 1000;
}
.sub-menu-content ul {
list-style-type: none;
line-height: 30px;
}
.sub-item {
width: 200px;
margin-left: -0.5rem;
}
.sub-menu-content li:last-child {
border-bottom: 1px solid transparent !important;
padding-bottom: 0.1rem !important;
margin-bottom: -0.2rem;
}
.sub-menu-content a {
color: #0f0f0f;
width: 100%;
padding: 0.8rem;
margin-left: -2rem;
text-decoration: none;
display: block;
text-align: left;
border-left: solid 4px transparent;
}
.sub-menu-content a:hover {
text-decoration: none;
border-left: 4px solid #ff9f1c;
background-color: #00007a0d;
color: #00007a !important;
}
/*.sub-menu:hover .sub-menu-content {
display: block;
}*/
.checkbtn {
font-size: 20px;
color: #00007a;
float: right;
line-height: 60px;
margin-right: 1rem;
cursor: pointer;
}
#media (max-width: 1025px) {
selector .header-logo {
margin-top: 0.1rem;
padding-top: 0;
}
.header-cont {
justify-content: space-between;
}
.only-mobile,
.sub-menu-link {
display: block !important;
}
.checkbtn,
.nav-link,
.sub-menu {
display: block;
}
.drop-chevron {
display: none;
}
.sub-menu-content {
padding: 0 18px;
background-color: white;
display: none;
overflow: hidden;
position: relative!important;
box-shadow: none;
border-radius: 0px!important;
}
.sub-menu-link:after {
visibility: visible!important;
}
.sub-item {
border-top: none;
margin-left: -1rem;
margin-top: 0rem;
margin-bottom: 0px;
box-sizing: border-box;
line-height: 3rem;
border-bottom: solid 1px #B5B5B5;
}
.sub-menu-content li:last-child {
padding-bottom: 0rem!important;
margin-bottom: 0rem;
}
.sub-menu-content a {
color: #0f0f0f;
width: 100%;
padding: 8px;
margin-left: 0rem;
text-decoration: none;
display: block;
border-left: none;
}
.sub-menu-content a:hover {
text-decoration: none;
border-left: none;
background-color: #00007a0d;
color: #00007a!important;
}
.header-menu {
position: absolute;
margin-top: 60px;
width: 80%;
height: 100vh;
background: #e8e8e8;
left: -100%;
text-align: left;
transition: 0.5s;
margin-right: 0;
padding: 0;
box-shadow: rgb(18 18 18 / 8%) 4px 4px 12px 0;
overflow: hidden!important;
}
.header-menu li:first-child {
margin-top: 0;
}
.header-menu :last-child {
padding-bottom: 0 !important;
}
.nav-item {
border-top: none;
margin-left: 0;
box-sizing: border-box;
border-bottom: 1px solid #b5b5b5;
width: 100%;
text-align: left;
line-height: 60px;
height: 60px;
display: block;
}
.nav-link:hover,
.sub-menu-link:hover {
background: #00007a0d;
transition-duration: 0.25s;
}
#check:checked~ul {
left: 0;
}
}
.menu-btn {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 22px;
height: 60px;
cursor: pointer;
transition: 0.5s ease-in-out;
}
.menu-btn__burger,
.menu-btn__burger::after,
.menu-btn__burger::before {
width: 22px;
height: 2.5px;
background: #00007a;
border-radius: 3px;
transition: 0.3s ease-in-out;
}
.menu-btn__burger::after,
.menu-btn__burger::before {
content: "";
position: absolute;
}
.menu-btn__burger::before {
transform: translateY(-6.5px);
}
.menu-btn__burger::after {
transform: translateY(6.5px);
}
.menu-btn.open .menu-btn__burger {
background: 0 0;
box-shadow: none;
}
.menu-btn.open .menu-btn__burger::before {
transform: rotate(45deg);
}
.menu-btn.open .menu-btn__burger::after {
transform: rotate(-45deg);
}
/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {
display: block;
}
.submenu {
list-style-type: none!important;
}
.subitem {
padding: 15px;
}
.submenu {
display: none;
}
.submenu-active .submenu {
display: block;
}
.has-submenu:after {}
.has-submenu>a::after {
line-height: 16px;
font-weight: 600;
font-size: 15px;
border: none;
color: #0f0f0f;
padding-right: 0.3rem;
padding-top: 0.2rem;
display: inline-block;
content: "⌃";
transform: rotate(180deg);
}
.subitem a {
padding: 10px 15px;
}
.submenu-active {
background-color: #111;
border-radius: 3px;
}
.submenu-active .submenu {
display: block;
position: absolute;
left: 0;
top: 68px;
background: #111;
}
.submenu-active {
border-radius: 0;
}
<div class="header">
<div class="header-cont">
<div class="header-logo">
<a aria-hidden="true" href="/">
LOGO
</a>
</div>
<nav class="header-nav">
<input type="checkbox" id="check">
<label for="check" class="checkbtn">
<div class="menu-btn">
<div class="menu-btn__burger"></div>
</div>
</label>
<ul class="header-menu">
<li class="nav-item">
<div class="sub-menu">
<a onclick="subOpen()" class="sub-menu-link">link 1<svg class="drop-chevron" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"/></svg></a>
<div id="myDropdown" class="sub-menu-content">
<ul>
<li class="sub-item">sub link 1</li>
<li class="sub-item">sub link 2</li>
<li class="sub-item">sub link 3</li>
<li class="sub-item">sub link 4</li>
</ul>
</div>
</div>
</li>
<li class="nav-item">link 2</li>
<li class="nav-item">link 3</li>
<li class="nav-item">link 4</li>
</ul>
</nav>
</div>
</div>

Add this to your CSS:
#media(min-width: 1025px){
.sub-menu:hover .sub-menu-content {
display: block;
}
}
This will make sure when the screen width is larger than 1025px (such as on a desktop and not mobile) your hover function will work to show the sub menu.

humberger menu stop scrolling main body css

I am trying to implement a hamburger menu. My expectation is when I will click on hamburger menu then the whole screen will contain only hamburger menu and there will be no scrolling and I don't want to see any content under body tag. Also I don't want any scroll option in hamburger menu. The whole screen after clicking the hamburger menu icon will contain only menu list.
below is the code for CSS: here #nav.active #menu I'm trying to control the displaying menu. Its connected with Javascript. But I don't get my expected output it always scroll y.
const btnMobile = document.getElementById('btn-mobile');
function toggleMenu(event) {
if (event.type === 'touchstart') event.preventDefault();
const nav = document.getElementById('nav');
nav.classList.toggle('active');
const active = nav.classList.contains('active');
event.currentTarget.setAttribute('aria-expanded', active);
if (active) {
event.currentTarget.setAttribute('aria-label', 'Fechar Menu');
} else {
event.currentTarget.setAttribute('aria-label', 'Abrir Menu');
}
}
btnMobile.addEventListener('click', toggleMenu);
btnMobile.addEventListener('touchstart', toggleMenu);
body,
ul {
margin: 0px;
padding: 0px;
}
a {
color: black;
text-decoration: none;
font-family: sans-serif;
}
a:hover {
background: rgba(0, 0, 0, 0.05);
}
#logo {
font-size: 1.5rem;
font-weight: bold;
}
#header {
box-sizing: border-box;
height: 70px;
padding: 1rem;
display: flex;
align-items: center;
justify-content: space-between;
background: #e7e7e7;
}
#menu {
display: flex;
list-style: none;
gap: 0.5rem;
}
#menu a {
display: block;
padding: 0.5rem;
}
#btn-mobile {
display: none;
}
#media (max-width: 600px) {
#menu {
display: block;
position: absolute;
width: 100%;
top: 70px;
right: 0px;
background: #e7e7e7;
transition: 0.6s;
z-index: 1000;
height: 0px;
visibility: hidden;
overflow-y: hidden;
}
#nav.active #menu {
height: calc(100vh - 70px);
visibility: visible;
overflow-y: auto;
}
#menu a {
padding: 1rem 0;
margin: 0 1rem;
border-bottom: 2px solid rgba(0, 0, 0, 0.05);
}
#btn-mobile {
display: flex;
padding: 0.5rem 1rem;
font-size: 1rem;
border: none;
background: none;
cursor: pointer;
gap: 0.5rem;
}
#hamburger {
border-top: 2px solid;
width: 20px;
}
#hamburger::after,
#hamburger::before {
content: '';
display: block;
width: 20px;
height: 2px;
background: currentColor;
margin-top: 5px;
transition: 0.3s;
position: relative;
}
#nav.active #hamburger {
border-top-color: transparent;
}
#nav.active #hamburger::before {
transform: rotate(135deg);
}
#nav.active #hamburger::after {
transform: rotate(-135deg);
top: -7px;
}
}
<header id="header">
<a id="logo" href="">Logo</a>
<nav id="nav">
<button aria-label="Abrir Menu" id="btn-mobile" aria-haspopup="true" aria- controls="menu" aria-expanded="false">Menu
<span id="hamburger"></span>
</button>
<ul id="menu" role="menu">
<li>Sobre</li>
<li>Produtos</li>
<li>Portfólio</li>
<li>Contato</li>
</ul>
</nav>
</header>
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle1"></div>
<div class="circle2"></div>

Does anybody know why the icons within my buttons refuse to center?

I know this is a minor issue, but you may notice that the icons (that I pulled off of react-icons) are slightly lifted up within the buttons. How could I put them right in the middle?
Thats my only question but it won't let me post that alone because my post it mostly code so here's more words. What a stupid feature.
Navbar.js
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, AiOutlineSearch } 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"><AiOutlineSearch/></button>
</div>
<ul className="ugh-buttons">
<li className="btn">
<button className="icon-btn">
<FiMail/></button>
</li>
<li className="btn">
<button className="icon-btn"><FaPlus/></button>
</li>
<li className="btn">
<button className="icon-btn"><AiTwotoneBell/></button>
</li>
<li className="btn">
<button className="icon-btn"><BsFillPersonFill/></button>
</li>
</ul>
</div>
</nav>
)
}
export default Navbar;
navbar.css
* {
margin:0;
padding:0;
box-sizing:border-box;
}
ul {
list-style: none;
display: flex;
}
a {
text-decoration: none;
color: #fff;
}
.homeBtn {
text-align: center;
justify-content: center;
padding-left: 25%;
color:#00ce7f;
}
#nav-bar {
background-color: #626466;
overflow: hidden;
}
.container {
display: grid;
grid-template-columns: 1fr 6fr 1fr;
align-items: center;
height: 55px;
}
.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: 70%;
border: none;
padding-left: 10px;
font-size: 20px;
}
.search {
padding-left: 15%;
}
.btn {
padding-right: 10px;
}
.ugh-buttons {
padding-right: 20px;
}
.icon-btn {
height: 40px;
width: 40px;
border-radius: 5px;
background-color: #00ce7f;
color: white;
border: none;
font-size: x-large;
}
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-size: large;
}
.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;
width: 40px;
border: none;
}
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
appearance: none;
}
input {
outline: none;
}

Try adding something like this to your css:
button[class*="icon-"],
button.searchBtn {
display: flex;
justify-content: center;
align-items: center;
}
This should center you're icon inside the button. If this doesn't work maybe check the size of the icon in F12 browser mode. Sometimes there are icons which does look like there having the same height and width, but they don't.
Another solution would be using position: absolute trick
button[class*="icon-"],
button.searchBtn {
position: relative;
}
button[class*="icon-"] > svg,
button.searchBtn > svg {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Hope this works for you :D

There is no need of changing so many things. Since you're using display flex for the parent, the elements position themselves next to each other. In order to make them take equal space (I think that's what you want) you need to use flex wrap for the children.
ul {
display:flex;
}
li {
flex-wrap: 1;
}