Help Needed for Menu Button

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!


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 :man_shrugging:

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