Design comparison
Solution retrospective
Struggle with the NAV menu toggle.
Community feedback
- @arrKhange1Posted almost 2 years ago
If it was question about how place your nav in the top right corner so that's it:
Set a
position:fixed
andheight:100%
on your nav and then put in thetop:0
,right:0
Now it will be sticked to your right side even if you scroll up and down
0 - @arrKhange1Posted almost 2 years ago
Hi there! At first, we need a hidden nav. Of course, we already have a nav class with all its properties. So then we need to somehow hide it from the UI... Good, let's define a nav--hidden class with only
display:none
for simplicity in it and put it with nav together to getclass="nav nav--hidden"
Cool, we only see the burger icon in the top right corner now, but how to toggle this nav class?
Right! Just get rid of nav--hidden in
class="nav nav--hidden"
Go to js file and define nav and burger elements so we can manipulate them
Now just simply while we clicking on burger we need to change the state of our nav (assume it as turning on and off the boolean flag on the backstage)
To do that in the burger event listener callback on click invoke
nav.classList.toggle("nav--hidden")
This construction stands for condition such as "If i see nav--hidden in classList, then i toggle it off, otherwise - toggle on. This way you can switch on/off your nav
Yeah... this way you only toggle on your nav, but how to close it after?
For this case, just simply add another close icon and do the same thing as before but inside the close icon event listener callback instead!
Hope it was helpful advice. Happy coding!
0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord