My website's navigation bar appears transparent, allowing the gradient background to show through initially. However, when I scroll, the text and images underneath become visible, which is not what I want. I would like the background to remain visible and cover over the text instead. You can view the issue on the main page here: https://gyazo.com/6c5e35ca0ed4f6f37e9e72f490737c78, and as you scroll down on these pages: https://gyazo.com/9a2957d728e36ae23e0cd9af604e8de1, https://gyazo.com/4849fb7f11689a5360e2e8686713d01d.
To achieve this effect, I believe I may need to include a block element in the HTML code that acts as a transparent layer for the background but not for the text or pictures. Please take a look at the relevant HTML and CSS code snippets below to better understand my issue.
<html>
<head>
<title> Moral & Ethical Issues Concerning the use of Computer Technology </title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Montserrat+Alternates&display=swap" rel="stylesheet">
<script src="jquery.js"></script>
<script src="main.js"></script>
<script src="smoothscroll.js"> </script>
<body>
<div class="main">
<nav class="fixed-nav-bar">
<div class="logo">
<img src="logo.png">
</div>
<div class="navigation-links">
<!-- Navigation links go here -->
</div>
<div class="gift">
<!-- Gift image goes here -->
</div>
</nav>
For the full CSS code snippet, please refer to the original post above. If anyone has any suggestions on how to create a box around the navigation bar that shows only the background when scrolling, I would greatly appreciate your help. Thank you.