The challenge I'm facing is with creating a responsive navbar with overflow hidden. I can't figure out why my code is causing the navbar to overflow instead of hiding it when removed from the page.
Here's the template code snippet:
<template >
<div class="main">
<nav>
<img class="logo" src="../assets/shared/logo.svg" alt="">
<ul class="main-nav">
<li><img class="ham" src="../assets/shared/icon-hamburger.svg" alt="" @click="navbar"></li>
<li><img class="close" src="../assets/shared/icon-close.svg" alt=""></li>
<li> <ul class="navbar" ref="nav">
<li><RouterLink class="router-link home" to="/"><span class="number">01</span> Home</RouterLink></li>
<li><RouterLink class="router-link" to="/crews"><span class="number">02</span> Crews</RouterLink></li>
<li><RouterLink class="router-link" to="/destination"><span class="number">03</span> Destinations</RouterLink></li>
<li><RouterLink class="router-link" to="/technology"><span class="number">04</span> Technology</RouterLink></li>
</ul></li>
</ul>
</nav>
<div class="content">
<p class="first">SO, YOU WANT TO TRAVEL TO<br><span class="space">SPACE</span></p>
<p class="second">Let's face it; if you want to go to space, you might as well genuinely go to outer space not hover kind of on the edge
of it. Well sit back, and relax because we'll give you a truly out of this world experience!</p>
<div class="explore">
<h1>EXPLORE</h1>
</div>
</div>
</div>
</template>`
And here's the CSS styling:
.main {
background-image: url('../assets/home/background-home-mobile.jpg');
background-repeat: no-repeat;
background-size: cover;
width:100%;
height: 100vh;
color: white;
padding-top: 3rem;
padding-right: 2rem;
}
nav {
display: flex;
justify-content: space-between;
padding-left: 1rem;
padding-right: 1rem;
}
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
.navbar {
position: absolute;
height: 87.9vh;
width: 48vw;
padding: 7rem 0rem 0rem 1rem;
background-color: #003b59;
opacity: 0.8;
left: 100vw;
top: 5vh;
z-index: 3;
}
.router-link{
display: block;
margin-right: 3rem;
text-decoration: none;
color: rgb(225, 219, 219);
font-size: 20px;
font-weight: lighter;
padding-bottom: 1rem;
}
`