#user-menu {
flex-grow: 0;
}
It's done. Your revised code snippet is as follows:
.row {
background: #f8f9fa;
margin-top: 20px;
}
.col {
border: solid 1px #6c757d;
padding: 10px;
}
#user-menu {
flex-grow: 0;
}
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<nav class="navbar navbar-dark bg-primary fixed-top navbar-expand-lg navbar-fix" id="header-nav">
<!-- Mobile dropdown buttons -->
<div class="container-fluid">
<div class="navbar-header">
(Other content of the navbar elements)
</div>
</div>
</nav>
The navigation bar items are using flexbox for styling, and by setting flex-grow to 0, they only take up the necessary space to display their current contents.
When you set one (or more) of them to flex-grow:0, the remaining items grow to fill the extra space that was originally assigned to those elements.
Note: Even though the rule affects the navbar on large screens, it's good practice to wrap it inside @media (min-width: 992px) { } for clarity, even though it functions correctly below that width as well.