I'm having trouble incorporating the Bootstrap class sticky-top into another CSS style element. I attempted to achieve the same effect without Bootstrap by adding position: sticky, top: 0 in the CSS, but it didn't work as expected. The issue arises when trying to maintain the CSS class ${styles.profile_nav_css}.
import Link from "next/link";
import styles from "../styles.module.css";
export const Nav = () => {
return (
<div className={`sticky-top ${styles.profile_nav_css} `>
<Link href="/profile" className="text-decoration-none">
Dashboard
</Link>
<br />
<Link href="/profile/add-vehicle" className="text-decoration-none">
Add Vehicle
</Link>
<br />
<Link href="/profile/hires" className="text-decoration-none">
Hires
</Link>
</div>@media (max-width: 420px) {
.profile_nav_css {
height: 10vh;
border: 3px solid green;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
box-sizing: border-box;
}
}
@media (max-width: 1500px) {
.profile_nav_css {
height: 100vh;
border: 3px solid blue;
display: flex;
flex-direction: column;
align-items: center;
box-sizing: border-box;
}
}