How to properly make navbar stay fixed at top of screen?

I am trying to make a navbar that stays at the top of the screen when you scroll down.

Here is how it currently looks:

Navbar.jsx

import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
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 (
    <section className="search-bar">
      <div className="row">
        <div className="col-lg mx-auto"> 
          <form>
            <div>
              <div className="input-group">
                <div className="homeBtn">
                <h3>VIZZEY</h3> 
                </div> 
              
                <input type="search" placeholder="Search" className="form-control" />
                <button className="searchBtn">
                  
                  <FaSearch />

                  </button>
                <div className="input-group-append buttons">
                
                  
                  <div className="icon">
                    <button className="icon-btn">
                      <h4><FiMail /></h4>
                    </button>
                  </div>
                  <div className="icon">
                    <button className="icon-btn">
                      <h4><FaPlus /></h4>
                    </button>
                  </div>
                  <div className="icon">
                    <button className="icon-btn">
                      <h4><AiTwotoneBell /></h4>
                    </button>
                  </div>
                  <div className="icon">
                    <button className="icon-btn">
                      <h4><BsFillPersonFill /></h4>
                    </button> 
                  </div>
                </div>
              </div>
            </div>
          </form>
        </div>
      </div>
    </section>  
  )
}
export default Navbar;

navbar.css

.searchBtn {
    color: #fff;
    background-color: #00ce7f;
    height: 38px; 
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px; 
    width: 40px;   
    border: none;  
}    

form {
    padding-top: 10px;
}

.icon {
    padding-right: 20px;
} 

.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; 
} 

.form-control:focus-within {
    background-color: rgb(255, 255, 255); 
    border-color: rgb(133, 133, 133); 
    outline: none;  
 
}
.profiledropdown-item {
width: 200px;
height: 100px;  
margin-left: 20px;
border: 3px solid rgb(255, 0, 0);
background-color: #ff0000; 
display: flex;
} 


.search-bar {
    width: auto; 
    border: solid  #333333; 
    background-color: #333333; 
    padding-bottom: 10px;   
    position: fixed;
}

[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

.icon-btn {
    height: 40px; 
    width: 40px; 
    border-radius: 5px; 
    background-color: #00ce7f;
    color: white; 
    outline-color: chocolate; 
    border: none;
}

.homeBtn {
    padding-right: 60px; 
    padding-left: 50px; 
    color: #00ce7f;  
 
} 

.buttons {
    padding-left: 55px; 
    padding-right: 15px;
}
 
button:focus, button:active {
    outline: none !important;
    box-shadow: none !important; 
    background-color: rgb(111, 0, 255);
  }

I tried to simply add "position: fixed;" to the "search-bar" class, but when I do that, it looks like this:

Can somebody tell me how make it look how it does in the first picture, but just remain at the top of the screen without shrinking and without the boxes getting in the way?