After applying position sticky, button not working

I created a sidebar with buttons to locate throughout the document, but after applying position sticky, buttons are not working at all not even hover effect is working
2 Replies
Jochem
Jochem2y ago
without a codepen or some other live example it's not really possible to help
ronyshahab
ronyshahab2y ago
this is the html code: import React from "react"; import { categories } from "../../utils/constant"; import { color, Stack } from "@mui/system"; import "./sidebar.css"; const Sidebar = ({ selectedCategory, setCategory }) => { return ( <div className="container"> <div className="sidebarContainer"> <div className="sidebarButtons"> {categories.map((c) => ( <button className="sidebarButton" style={{
alignItems: "center", color: "white", border: "none",
}} key={c.name} onClick={() => setCategory(c.name)} > <span>{c.icon}</span> <span style={{ marginLeft: "8px" }}>{c.name}</span> </button> ))} </div> </div> </div> ); }; export default Sidebar; this is css: .sidebarButton{ background-color: #323232;
width: fit-content; transition: .1s; } .sidebarButtons{ display: flex; flex-direction: column; justify-content: center; align-items: center; width: 150px; } .sidebarButton{ display: flex; justify-content: center; align-items: center; width: 100px; border-radius: 10px; padding: 3px 5px; } .sidebarButton:hover{ background-color: red;
} .sidebarContainer{ /* margin-top: 20px; / height: 600px; overflow-x: auto; overflow-y: auto;
background-color: #323232;
border-right: 1px solid grey; border-top: 1px solid grey;
} .container{ /
position: sticky; */ top: 0; z-index: -1; }
Want results from more Discord servers?
Add your server