Toggle menu

Hi guys how can i get the menu icon all to the right https://codepen.io/Boeroe/pen/xxMgrxz
Boeroe
CodePen
xxMgrxz
...
16 Replies
MarkBoots
MarkBoots12mo ago
for the open and closing of the navbar. don't do it with the left position just set the left to 0 and use translate to move it on/off screen
Boeroe
Boeroe12mo ago
I fixed it with left to -110 but you dont recommand that?
MarkBoots
MarkBoots12mo ago
No description
MarkBoots
MarkBoots12mo ago
with translate: -100% 0 it will always be the full width of itself that it shifts to the left. so no magic number needed
Boeroe
Boeroe12mo ago
Yes also working with that i see
MarkBoots
MarkBoots12mo ago
and instead of using .navbar, i would do it on the <nav> itself. that way there won't be an empty element still in your header. (that is the reason why the icon is not positioned fully to the right so this inside your mediaquery
nav {
position: absolute;
top: 100%;
left: 0%;
width: 100%;
margin: 0;
translate: -100% 0;
transition: translate .25s ease;
transition-delay: .25s;
}
nav.active {
translate: 0;
transition-delay: 0s;
}
.navbar {
padding: 1rem 4%;
background: red;
box-shadow: 0 .5rem 1rem rgba (0, 0, 0, 2);
flex-direction: column;
}
nav {
position: absolute;
top: 100%;
left: 0%;
width: 100%;
margin: 0;
translate: -100% 0;
transition: translate .25s ease;
transition-delay: .25s;
}
nav.active {
translate: 0;
transition-delay: 0s;
}
.navbar {
padding: 1rem 4%;
background: red;
box-shadow: 0 .5rem 1rem rgba (0, 0, 0, 2);
flex-direction: column;
}
you'll need to adjust the queryselector in the js from .navbar to nav
let navbar = document.querySelector('nav');
let navbar = document.querySelector('nav');
Boeroe
Boeroe12mo ago
Boeroe
Boeroe12mo ago
When I copy that I’m running in to those errors Its not going to the right, the menu is not working. And as soon as you make the screen smaller it suddenly comes into view and is gone again
MarkBoots
MarkBoots12mo ago
think you didnt change the js. also declare the properties you want to transition. so transition: translate .25s otherwise, update your pen so i can check
Boeroe
Boeroe12mo ago
It is working, the only problem im still runing into is that if u make the screen smaller its coming up and its gone again as u can see in the recording at the very beginning https://codepen.io/Boeroe/pen/xxMgrxz
Boeroe
CodePen
xxMgrxz
...
MarkBoots
MarkBoots12mo ago
personally i would'n mind it too much. users don't just change window sizes during a visit. otherwhise you can use an evenlistener on window resize, to temporarily turn off the animation
Boeroe
Boeroe12mo ago
Its just anoying me haha Its as soon as you come at the 768px U have an example of that?
MarkBoots
MarkBoots12mo ago
for example
window.addEventListener("resize", ()=>{
navbar.classList.add("no-transition");
setTimeout(()=>{
navbar.classList.remove("no-transition");
},500)
});
window.addEventListener("resize", ()=>{
navbar.classList.add("no-transition");
setTimeout(()=>{
navbar.classList.remove("no-transition");
},500)
});
and in css add an extra
nav.no-transition{ transition: unset }

nav.no-transition{ transition: unset }

Boeroe
Boeroe12mo ago
Still coming when making the screen smaller
MarkBoots
MarkBoots12mo ago
i updated your pen. it should work. i also close the menu as soon as the window resizes so it wont stay open even if the screensize is large https://codepen.io/MarkBoots/pen/oNmWgmb
Boeroe
Boeroe12mo ago
Yup it worked, its gone. Thank you so much!
Want results from more Discord servers?
Add your server