I'm experiencing an issue with my navbar. I want it to stay at the top of the page when I scroll, but whenever I apply the "position: fixed;" property, the navbar disappears. Below is my HTML and CSS code:
<nav>
<div class="navbar">
<button class="btn button"> Home <A href="#"> </button>
<button class="btn button"> About Me </button>
<button class="btn button"> Portfolio</button>
<button class="btn button"> Contact Me </button>
</div>
</nav>
<div class="background-img">
</div>
<div class="portfolio">
<img src="https://www.example.com/image.jpg">
</div>
And here's the corresponding CSS:
nav{
background-color: transparent;
position: fixed;
}
.btn{
background-color: Black;
color: white;
font-size: 30px;
padding: 10px;
margin: 10px 193px 10px 0px;
}
.background-img {
background: url(https://www.example.com/background-image.jpg);
background-size: 100% 100%;
background-repeat: no-repeat;
width: 100vw;
height: 100vh;
position: relative;
}