overflow hidden not working on my vue project - html

Question

trying to do a responsive navbar and overflow hidden and been giving me issues wojdering what the problem is cause i dont think anything is wrong with my code.
instead of hiding my navbar when i take it out of the page and make it hidden it just leaves it there to overflow
heres my template code:
`
<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 wel 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 heres my css:
`
.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;
}
`

Answer 1

You need to remove the overflow-hidden class from the v-card that wraps the v-app-bar and v-sheet.