Search code examples
cssresponsive-designmaterializeresponsive

materialize css responsive navbar not working on mobile

I have the following code

<nav class="blue">
  <a href="#!" class="brand-logo center">Logo</a>
</nav>

I only have the centred logo in my code. However when I view this code on mobile devices, the navbar becomes very small in height. Why is the responsive classes not working in this case?

Note that I am not concerned with collapsing navbar elements to a sidenav. Right now the navbar itself looks very small (in height) on a mobile devices, which makes me think that somewhere some responsive stuff is missing.

As an example of my problem I'm attaching this codepen. Try rendering it in different resolutions by resizing horizontally, the navbar will become shorter in height on smaller devices.

Edit 1: If you look at the screenshot below, it's not only that the navbar isn't responsive, but the entire content on the page is not being responsive. enter image description here

Solution

  • I figured out what the problem was. I was missing a meta viewport tag on my page.

    Basically just adding this made it work:

    <meta name="viewport" content="width=device-width, initial-scale=1">

    This allowed the existing media queries (ones provided by materializecss itself) to work properly as expected.