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

February 18, 2021 by admin

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:

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:

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?