Media query doesn't seem to work

Question

I'm working on a website and am trying to use media queries to make my website work for both mobile and desktop. I have a floating menu bar for my desktop site, and I want this menu bar to be relative for the mobile site.

So in my CSS file I have these lines:

    /*For desktop*/
    nav#menubar {
      position: fixed;
      top: 0px;
    }

    /*For iPhone 5 */
    @media screen and (max-width: 768px){
      nav#menubar {
        position: relative;
        top: auto;
      }
    }

When I run this the menu bar is relative for both the desktop page and the mobile page. However when I comment out the For iPhone 5 media query, the menu bar is fixed for both mobile and desktop as expected. Does anyone know why the media query is working for both the desktop and mobile site?

Any help would be greatly appreciated.

Answer 1

To be sure, did you include a <meta name="viewport" content="..."> tag in your HTML? https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html