Seeking help on a persistent issue, but previous solutions haven't worked for me.
Looking to implement a hamburger menu that transitions in from offscreen.
The design appears correctly on desktop and simulating mobile, but actual mobile view requires horizontal scrolling to access the offscreen menu.
I'm relatively new to HTML/CSS.
Here are some approaches I've attempted:
Trying various position values (fixed, absolute, relative) disrupted the navbar layout.
html, body{
width:100%;
overflow-x: hidden;
}
Also experimented with:
#root{
overflow-x: hidden;
}
And adding a wrapper element inside the body:
.wrapper{
position: fixed;
overflow-x: hidden;
}
Including specific viewport settings like minimum-scale and user-scalable:
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1, user-scalable=no">
Excerpt from my index file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1, user-scalable=no">
<link rel="stylesheet" href="style.css" asp-append-version="true" />
<link href="https://fonts.googleapis.com/css2?family=DM+Sans&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600&display=swap" rel="stylesheet">
<title>Justin</title>
</head>
<header>
</header>
<body>
<div class="wrapper">
<nav>
<div class="logo">Unique Logo</div>
<ul class="nav-links">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Content</a></li>
<li><a href="#">Contact</a></li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<script src="app.js"></script>
<div class="card" style="width:fit-content">
<img src="BW Boathouse16X20.jpg" alt="Avatar">
<div class="container">
<h4><b>Justin</b></h4>
<p>Boathouse</p>
</div>
</div>
</div>
</body>
</html>
CSS styles including the failed attempts:
/* The navigation menu */
*{
padding: 0;
margin:0;
box-sizing: border-box;
font-family: 'Quicksand', sans-serif;
text-transform: uppercase;
}
#root{
overflow-x: hidden;
}
html, body{
width:100%;
overflow-x: hidden;
}
nav{
display:flex;
justify-content: space-around;
align-items: center;
height: 80px;
background-color: whitesmoke;
box-shadow: 0 2px 4px -2px rgb(0,0,0,.35);
}
.nav-links{
display:flex;
width: 30%;
justify-content: space-around;
}
.nav-links a{
text-decoration: none;
font-size: 14px;
font-weight: 500;
letter-spacing: 2px;
color: rgb(25, 25, 25)
}
.nav-links li{
list-style: none;
}
.burger{
display: none;
}
.burger div{
width: 25px;
height: 2px;
background-color: rgb(25, 25, 25);
margin: 5px;
border-radius: 1px;
transition: all .25s ease;
}
.logo{
letter-spacing: 5px;
font-size: 22px;
font-weight: 600;
color: rgb(25, 25, 25)
}
h4{
font-size: 16px;
}
p{
font-size: 14px;
}
.card {
z-index: -1;
box-shadow: 0 2px 4px -2px rgb(0,0,0,.35);
transition: 0.3s;
position: absolute;
top: 10%;
left: 50%;
transform: translateX(-50%);
}
.card:hover {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}
.container {
display:flex;
flex-direction: column;
text-align: center;
padding: 8px;
}
.card img{
height:35vw;
}
@media screen and (max-width:1200px) {
body{
overflow-x: hidden;
}
.nav-links{
width: 50%;
}
}
@media screen and (max-width:900px) {
.wrapper{
position: fixed;
overflow-x: hidden;
}
html, body{
width:100%;
overflow-x: hidden;
}
nav{
display:flex;
justify-content: space-around;
align-items: center;
height: 7vh;;
background-color: whitesmoke;
box-shadow: 0 2px 4px -2px rgb(0,0,0,.35);
width:100vw;
}
.card {
z-index: -1;
box-shadow: 0 2px 4px -2px rgb(0,0,0,.35);
transition: 0.3s;
position: absolute;
top: 10%;
left: 50%;
transform: translateX(-50%);
}
.card:hover {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}
.card img{
width:85vw;
height:auto;
}
.container {
display:flex;
flex-direction: column;
text-align: center;
padding: 8px;
}
.nav-links{
position:absolute;
right:0px;
height:25vh;
top: 6vh;
display: flex;
flex-direction: column;
width: 100%;
background-color: whitesmoke;
transform: translateX(105%);
transition: transform 0.5s ease-in;
box-shadow: 0px 2px 4px -2px rgb(0,0,0,.35);
}
.nav-links li{
width:100%;
height: 7vh;
box-sizing: border-box;
opacity: 0;
text-align: center;
display:flex;
align-items: center;
justify-content: center;
}
.nav-links li:hover{
background-color: lightgray;
}
.burger{
display: block;
}
}
.nav-active{
transform: translateX(0%);
}
@keyframes navLinkFade{
from{
opacity: 0;
transform: translateX(50px);
}
to{
opacity: 1;
transform: translateX(0px);
}
}
@keyframes navLinkFadeOut{
from{
opacity: 1;
transform: translateX(0px);
}
to{
opacity: 0;
transform: translateX(50px);
}
}
.toggle .line1{
transform: rotate(-45deg) translate(-5px,5px);
}
.toggle .line2{
opacity: 0;
}
.toggle .line3{
transform: rotate(45deg) translate(-5px,-5px);
}
JavaScript code snippet:
const navSlide = () => {
const burger = document.querySelector('.burger');
const nav = document.querySelector('.nav-links');
const navLinks = document.querySelectorAll('.nav-links li');
burger.addEventListener('click', () => {
//Toggle Nav
nav.classList.toggle('nav-active');
//Animate Links
navLinks.forEach((link, index) => {
if(link.style.animation){
link.style.animation='';
} else{
link.style.animation=link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 +.75}s`;
}
});
//Burger Animate
burger.classList.toggle('toggle');
});
}
navSlide();