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?
In addition to
position: fixed
, addz-index: 9000
or similar to the bar so it stays on top of everything else.Maybe you are looking for
or if you are using position fixed, also add width and z-index
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.Did you try adding a higher z-index value to your search-bar?
E.g.
z-index: 99;
Read this: css-tricks.com/almanac/properties/z/z-index