How to fix navbar shrinking height when resizing page - html

Question

I'm writing an app that replicates the look/feel of a desktop OS, and my navbar in the bottom of the page shrinks in height when the page is resized in height. It shrinks in such a way that it becomes unusable at a point.
I've already tried some CSS properties such as using: position: fixed, position: relative, and position: absolute. position: absolute is the one that has been the best try out of all of them. If I use any others, the navbar would stick at the top no matter what you change in the style.
body {
/* these are for the navbar */
top: 100%;
margin: 0px;
padding: 0px;
/* normal styles */
font-family: "MS Sans Serif";
color: white;
background-color: #008080;
font-size: 12px;
/* without this, the page would go blank
overflow: hidden;
}
ul {
/* this is what works best */
position: absolute;
width: 100%;
top: 96.17%;
/* normal navbar styling.. */
list-style-type: none;
margin: 0px;
padding: 0px;
overflow: hidden;
background-color: #ffffff;
}
I expected the navbar to move up normally as needed, keeping its properties. Instead, the navbar moves up while the page is resized, but it becomes thinner and thinner until it is unusable.
Here is a sample gif: enter image description here

Answer 1

ul {
display: flex;
list-style: none;
align-items: center;
flex-flow: row;
background: red;
position: sticky;
max-width: 100vw;
width: 100%;
color: wheat;
height: 50px;
justify-content: space-around;
}
#media screen and (max-width: 768px) {
ul {
transition: .2s all linear;
height: 45px;
max-width: -webkit-fill-available;
width: 100%;
}
}
<ul>
<li>Home</li>
<li>About</li>
<li>Help</li>
<li>Contact</li>
</ul>