I'm currently working on a front-end project and encountering a small bug. Whenever I close my burger menu navigation, the main image on my page widens and does a strange movement. I've attempted various tricks like adjusting the positioning of my parallax image from fixed to see if it resolves the issue, but unfortunately, nothing seems to work.
If you'd like to take a look at the webpage in question, here's the link:
Below is the code snippet:
<Box sx={{ display: "flex", flexDirection: "column", height: "100vh" }}>
{/* <Navbar /> */}
<Box className="parallax">
<Box
sx={{
display: "flex",
width: "100%",
height: "100%",
position: "absolute",
alignItems: "center",
justifyContent: "center",
flexDirection: "column",
fontSize: "4rem",
color: "#F4F4F4",
zIndex: 10,
}}
>
<Box sx={{background: "#141228", width: "100%", display: "flex", justifyContent: "center"}}> SmashStream </Box>
<Box sx={{ fontSize: "1.2rem", background: "#141228", width: "100%", display: "flex", justifyContent: "center"}}>
{" "}
Show off your skills and join us
</Box>
</Box>
</Box>
</Box>
Here is the CSS for reference:
html,
body {
margin:0;
padding:0;
border:0;
outline:0;
font-family: "Bebas";
}
/* More CSS styles... */
Your assistance with resolving this issue would be greatly appreciated!