If you open the design which I am using to create this site on phone, you will notice that the navbar sticks on top of the screen. This is done through absolute positioning in CSS. You add position: absolute; to the styles and then define its positioning using the four CSS attributes top, left, right, and bottom.

The following code demonstrates a little div staying on top of the screen regardless of how much you scroll down.

<div style="position: absolute; top: 0;">Our Heading</div>
<!-- Rest of the HTML -->

It looked pretty easy to stick the navbar on top for smaller screens at first glance but there was an issue. The container which contains the navbar has sticky positioning. And little did I know that position: sticky; creates its own stacking context.

The first solution which came to my mind was to add absolute positioning to the nav with its z-index set to something high. You thought of something like this as well, didn't you? HAHA, you did!

Because of the separate stacking context, whatever z-index I applied to my nav would only be applied to the parent container containing the navbar and not the entire page. Hence, it will hide as soon as that container would be scrolled through. (The website is basically two containers, one for the main title thing you see on the left in desktop mode. And the other is the content container which is on the right in desktop mode.)

I was scratching my head left, right and center, but I could not find a solution. There was a simple solution to alter the HTML using JavaScript, but I did not want it. At that time, al from Django Discord came in to help me.

The solution at the end was to have two different navbars. One would be the version which I wanted for smaller screens, and one was what I wanted with larger screens. And with CSS mediaquery, I could switch between display: none; and display: flex; to solve the issue.

The solution at the end was quite trivial, but I could not get it. Regardless, something to remember for the future for sure!