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
, add z-index: 9000
or similar to the bar so it stays on top of everything else.
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?
Eg z-index: 99;
Read this: css-tricks.com/almanac/properties/z/z-index
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%;
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.