I'm having an issue with my website design. I have a gradient background and a sticky-top menu on the site. The problem is that when I scroll down, the content appears through the menu, which is not ideal. I don't want to apply the same gradient to the navbar element as the body background because it creates a noticeable difference between them.
body {
background: transparent linear-gradient(123deg, #76FCFF 0%, #F966F8 52%, #E8BBA2 100%) 0% 0% no-repeat padding-box;
background-attachment: fixed;
}
nav {
position: sticky;
top: 0
}
.content {
background-color: #ffffff;
margin: 0px 10px;
box-shadow: 0px 3px 10px #38383880;
}<body>
<nav>Navbar content</nav>
<div class="content">
<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content
</div>
</body>