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
without a codepen or some other live example it's not really possible to help
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; }
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; }