I have implemented a sticky navbar on my index page along with JavaScript code that adjusts the navbar position based on screen height. When scrolling, the navbar sticks to the top of the page, but the flipping cube overlaps with the sticky navbar. How can I resolve this issue?
View the problem image here
Here are my code snippets:
@charset "utf-8";
/* CSS Document */
...
<!DOCTYPE html>
<html lang="en">
<head>
<title>Page Title</title>
...
</script>
</head>
<body>
<div class="header" id="headerid">
...
</div>
<div class="navbar">
...
</div>
<div class="row">
<div class="side">
...
</div>
<div class="main">
<div class="container">
...
</div>
...
</div>
<div class="footer">
<h2>Footer</h2>
</div>
</body>
<script>
...
</script>
</html>