Hey there, I've added buttons to my Navbar from Mui. However, I'm running into an issue where the margin and padding won't change no matter what I do. I'm trying to create some space between them. Please see the code below:
import { useContext } from "react";
import { Cont } from "../Cont";
import "./stylingfolder/Navbar.css";
import { Button } from "@mui/material";
function Navbar(){
const {setUser}=useContext(Cont)
function handleLogoutClick() {
fetch("/logout", { method: "DELETE" }).then((r) => {
if (r.ok) {
setUser(null);
}
});
}
return( <>
<nav className="navstyle">
<Button className="lb" href="/about" variant="contained">About</Button>
<Button className="lb" href="/restaurants" variant="contained">Explore</Button>
<Button className="lb" href="/myreservations" variant="contained">My Reservations</Button>
<Button className="lb" href="/blogs" variant="contained">Blogs</Button>
<Button className="lb" variant="contained" size="large" onClick={handleLogoutClick}>
Logout
</Button>
</nav>
Navbarcss
.navstyle{
background-color: rgb(19, 18, 18);
}
.navstyle lb{
margin-top: 12%;
}