Toggle menu
Hi guys how can i get the menu icon all to the right
https://codepen.io/Boeroe/pen/xxMgrxz
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
I fixed it with left to -110 but you dont recommand that?
with
translate: -100% 0
it will always be the full width of itself that it shifts to the left. so no magic number neededYes also working with that i see
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
you'll need to adjust the queryselector in the js from
.navbar
to nav
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
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
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
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
Its just anoying me haha
Its as soon as you come at the 768px
U have an example of that?
for example
and in css add an extra
Still coming when making the screen smaller
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
Yup it worked, its gone. Thank you so much!