How to reverse the effect of "display:none"

Question

I am making my first responsive webpage. It's desktop-first, and since it's a simple one-column page I need only one media query, for mobiles. I have a different nav bar for the desktop from the mobile. So I put both navs in the HTML. I set the nav that is for the mobile to "display:none" in the main part of the css, which makes it disappear from the desktop version. I set the desktop's nav to "display:none" in the query, which makes that nav disappear from the mobile.

The trouble is that I can't make the mobile's nav visible again in the mobile version. How do I undo "display:none" in the mobile query?

(The page is http://www.birdwatching.com/optics/2018_Kowa_scope/kowa-tsn-553-review.html)

Answer 1

display:revert will set the display setting to its previous value. This way you don't have to worry about what display type (e.g. block, flex, etc.) it was before it was hidden.

More reading

• https://developer.mozilla.org/en-US/docs/Web/CSS/revert
• https://css-tricks.com/what-does-revert-do-in-css/

Answer 2

If you use visibility:visible and visibility:hidden instead, you won't have to worry about what the display of the element was previously set to

Answer 3

Inside the mobile media query do display:block for the mobile nav that you hid, and display none for the desktop nav.