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:

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?

4 thoughts on “How to properly make navbar stay fixed at top of screen?”

  1. Maybe you are looking for

    position: sticky; //will remain in the flow, and stick while scrolling down.  
    top:0; // will stick to top
    

    or if you are using position fixed, also add width and z-index

    position: fixed;
    z-index:9000;
    width: 100%;
    
    Reply
  2. You can add a CSS property to the main class/id of the Navbar position: fixed;

    Applying this property, your navbar will be fixed on its position it means if a user is scrolling still the navbar will be sticky at its position.

    Do these step:
    Add position: fixed;
    and z-index: 1000;

    by applying z-index: 1000; your navbar will be on top of all the elements.

    Reply

Leave a Comment