I am working on an app that is designed to resemble a desktop operating system. Currently, I have a navbar positioned at the bottom of the page, but when the height of the page is adjusted, the navbar shrinks too much and becomes difficult to use.
I have tried implementing various CSS properties including position: fixed, position: relative, and position: absolute. Out of these options, using position: absolute has provided the best results so far. If I try any other options, the navbar remains stuck at the top regardless of styling changes.
body {
/* Styles for the navbar */
top: 100%;
margin: 0px;
padding: 0px;
/* Normal styles */
font-family: "MS Sans Serif";
color: white;
background-color: #008080;
font-size: 12px;
/* Prevents page from going blank */
overflow: hidden;
}
ul {
/* Optimal positioning */
position: absolute;
width: 100%;
top: 96.17%;
/* Regular navbar styling */
list-style-type: none;
margin: 0px;
padding: 0px;
overflow: hidden;
background-color: #ffffff;
}
I anticipated the navbar moving up smoothly whenever necessary while maintaining its original characteristics. Unfortunately, what actually happens is that the navbar moves upwards as the page is resized, but it progressively becomes thinner until it is no longer functional. Check out this sample gif: enter image description here