I'm currently learning about HTML and CSS, and a bit of JS. I have created a mobile menu using a tutorial from youtube. I tried and check the website on my phone, the mobile menu, which is sent to the "right" of the screen when not active actually appears, and I can swipe towards it.
I have tried to use "overflow-x:hidden" on the body, the header, the nav, pretty much everything I could think of, it doesn't change anything. I've also tried to set the max-width of my body to 100vw, but it also doesn't stop the mobile menu from being on the right of my mobile screen when not active. Ideally, I'd like not to have any JS to solve this !
I hope I've been clear enough ! This is my first question on Stack Overflow so be gentle !
This is my code:
const navSlide = () => {
const burger = document.querySelector(".burger");
const nav = document.querySelector(".main-menu");
burger.addEventListener("click", () => {
nav.classList.toggle("nav-active"); });
};
navSlide();.main-menu {
position: absolute;
width: 100%;
right: 0px;
height: calc(100vh - 8rem);
top: 8rem;
color: var(--font-bis);
background-color: var(--font-color);
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
transform: translateX(100%);
transition: transform 0.3s ease-in-out;
}
.nav-active {
transform: translateX(0%);
}<header class="main-header">
<div class="container">
<nav class="main-nav">
<div class="logo"><img src="img/logo.svg" alt="logo ubiquity" class="logo-img">
<p>Ubiquity<span>Professionnal Web UI</span></p>
</div>
<ul class="main-menu">
<li class="menu-item"><a href="" class="menu-link">Home</a></li>
<li class="menu-item"><a href="" class="menu-link">About</a></li>
<li class="menu-item"><a href="" class="menu-link">Portfolio</a></li>
<li class="menu-item"><a href="" class="menu-link">Blog</a></li>
<li class="menu-item"><a href="" class="menu-link">Contact</a></li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
</div>
</header>Cheers !