Fix div to center of page, but don't overflow when resizing - html

Question

I'm trying to make a navbar that fits the length of another div where I'm listing some data. I want it to be fixed to the top of the page no matter where you scroll. I have it like that, but when you resize the window from the right side and make it smaller, it'll eventually go off the page. I'm pretty sure it has something to do with the fact that I'm translating it over 50% and it's not caring if it's going off screen, so is there some sort of way to easily counteract that? I'd like it to behave the way the table does. When it's about to go off screen, stop moving it over. Thanks for any help
Here is a demonstration:
http://box.endurehosting.com/contents/public/Screen-recorder-fri-jan-03-2020-21-31-14.webm
Here's the live website:
https://dev.theromdepot.com/archive.php?home
Here is my HTML:
<div id="nav-bar">
<input id="search" placeholder="Search" type="input"></input>
</br>
</br>
<div id="title-bar">
<p>Name</p>
<p>Count</p>
</div>
</div>
Here is my CSS (I'm using SCSS)
$mainBackground: #1d1f21;
$textHoverColor: #919191;
#font-face {
font-family: 'Muli';
src: url('../fonts/muli.ttf') format('truetype');
}
body {
background-color:$mainBackground;
}
a {
color:white;
text-decoration: none;
transition: color .2s;
&:hover {
color:$textHoverColor;
transition: color .2s;
}
}
#nav-bar {
position:fixed;
width:25%;
min-width:800px;
left: 50%;
transform: translateX(-50%);
background-color:grey;
padding:10px;
z-index:1;
#search {
&::placeholder {
opacity:1;
}
position:relative;
border:none;
border-radius:2px;
padding:5px;
font-size: 20px;
line-height: 10px;
&:focus {
box-shadow:2px 2px 5px darkgrey;
}
}
#title-bar{
position:relative;
color: white;
p {
display:inline-block;
font-size: 16px;
font-weight: 600;
letter-spacing: 2px;
padding-bottom: 5px;
}
}
}
#list {
margin:auto;
width:25%;
min-width:800px;
color:white;
#results {
position:relative;
top:100px;
width:100%;
.row {
font-family: Muli;
font-size: 14px;
word-spacing: 2px;
position:relative;
width:100%;
height:18px;
padding-top:5px;
p {
display:inline-block;
position:absolute;
&:nth-child(1) {
// left:5%;
}
&:nth-child(2) {
left:51%;
}
&:nth-child(3) {
left:67%;
}
&:nth-child(4) {
margin:0;
left:82.5%;
}
}
}
}
}

Answer 1

The problem is your min-width property, which won't let it shrink under 800px. So when you are sizing the window down and passing 800px, the navbar stays the same width.
One solution could be using media queries in order when you reach the screen-width of 800pxs, you give the css property another value.
If that min-width attribute is not needed, since you are setting the width, you can just remove it and it will work.