1

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)

1
  • Welcome to Stack Overflow! Questions seeking code help must include the shortest code necessary to reproduce it in the question itself preferably in a Stack Snippet. Although you have provided a link, if it was to become invalid, your question would be of no value to other future SO users with the same problem. See Something in my website/demo doesn't work can I just paste a link.
    – Paulie_D
    Commented Aug 16, 2018 at 9:06

3 Answers 3

Reset to default
2

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

0
1

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

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.