Toggle menu

Hi guys how can i get the menu icon all to the right https://codepen.io/Boeroe/pen/xxMgrxz

CodePen

...

16 Replies

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•7mo ago

I fixed it with left to -110 but you dont recommand that?

MarkBoots•7mo ago

MarkBoots•7mo 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•7mo ago

Yes also working with that i see

MarkBoots•7mo 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•7mo 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•7mo 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•7mo 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•7mo 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•7mo ago

Its just anoying me haha Its as soon as you come at the 768px U have an example of that?

MarkBoots•7mo 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•7mo ago

Still coming when making the screen smaller

MarkBoots•7mo 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

Mark Boots

CodePen

oNmWgmb

...

Boeroe•7mo ago

Yup it worked, its gone. Thank you so much!

Gaming

Programming

Toggle menu