As described in the title, I'm simply trying to create a bottom navigation. Here's my code within the body:
...
<body>
<div class="h-screen flex flex-col flex-nowrap overflow-y-hidden">
<div class="flex-1 flex flex-col justify-center items-center overflow-y-auto">
<p>Here's my page content.</p>
</div>
<div class="flex flex-row gap-2 w-full bg-primary-700 p-2 justify-center">
<button class="text-gray-300">
{% include 'icons/database.svg' %}
</button>
<button class="text-gray-300">
{% include 'icons/database.svg' %}
</button>
<button class="text-gray-300">
{% include 'icons/database.svg' %}
</button>
</div>
</div>
</body>
On desktop displays, it works fine and the nav shows up at the bottom and the contents of the div with 'flex-1' are scrollable. However, the bottom nav disappears for mobile displays. I'm stumped because as far as I know, this should work on mobile if the same rules work perfectly fine on desktop but I'm not sure what I'm missing. Any help appreciated.