Hello everyone!
I was creating my tech doc page and I created a functional hamburger menu that will appear on mobile devices so that people can toggle the menu easily. But, if I close the menu after viewing it on mobile view and then if I maximize my browser window to view the desktop version, the navbar is disappeared!
Screenshots:
Before clicking the hamburger menu:
After opening and closing the hamburger menu:
I don’t know how to explain this problem clearly, but if you find more information is needed, please let me know!
Project link:
When hamburger menu toggles the #links display property to none and you expand the window the display property will remain none media query won’t revert the value as there is no media query that gets triggered when you expand the screen size all your media queries gets triggered only when the screen size get smaller than some value not when it gets larger than some value. To fix this you can set a media query that get trigger when your screen size is larger than some value i.e. by using min-width value and make the #links display property to block
1 Like
Thanks, @mdshariq for your answer. I appreciate it. But, it doesn’t work 
Well you can use JavaScript to add condition that display will remain block when width is more than certain value window.screen.width returns the width of screen. OR you can force the display:block; property using !important in media query thing that i told you before.
1 Like
Wow @mdshariq! That !important tip solved it!
Happy to help also your page looks awesome!
1 Like
