Установка значений min-width и max-width в css - самый простой способ предотвратить наложение элементов навигации один под другим при изменении ширины экрана.
Вот обновленный файл с указанием минимальной и максимальной ширины:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
rel="stylesheet"/>
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
<nav class="navbar fixed-top navbar-expand-sm navbar-dark bg-primary"
style="min-width: 480px;">
<div class="navbar-brand ml-3">
<button>btn</button>
</div>
<div class='nav-item'>
<h3 class='d-sm-block text-nowrap' style="max-width: 200px;">PROJECT TITLE</h3>
</div>
<div class="input-group ml-2 nav-item" style="width: 150px; max-width: 150px; margin-left: auto; margin-right: 0px;">
<input class="form-control"
type="search"
placeholder="New Stuff..."/>
<span class='input-group-btn'>
<button class="btn btn-danger" type="submit">
...
</button>
</span>
</div>
</nav>
</div>
</body>
</html>