Issues with responsive design for nav bar (doesn't switch designs correctly)

I’ve been playing around with the responsive CSS template at https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_templates_start_page&stacked=h

One of the features in that template is that the nav bar at the top will switch from being horizontal to being in a vertical dropdown when the screen is too narrow. I believe the following is the relevant portions of code:

<!-- Navbar -->
<div class="w3-top">
  <div class="w3-bar w3-red w3-card-2 w3-left-align w3-large">
    <a class="w3-bar-item w3-button w3-hide-medium w3-hide-large w3-right w3-padding-large w3-hover-white w3-large w3-red" target="_blank" rel="nofollow" href="javascript:void(0);" onclick="myFunction()" title="Toggle Navigation Menu"><i class="fa fa-bars"></i></a>
    <a target="_blank" rel="nofollow" href="#" class="w3-bar-item w3-button w3-padding-large w3-white">Home</a>
    <a target="_blank" rel="nofollow" href="#" class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white">Link 1</a>
    <a target="_blank" rel="nofollow" href="#" class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white">Link 2</a>
    <a target="_blank" rel="nofollow" href="#" class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white">Link 3</a>
    <a target="_blank" rel="nofollow" href="#" class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white">Link 4</a>
  </div>

  <!-- Navbar on small screens -->
  <div id="navDemo" class="w3-bar-block w3-white w3-hide w3-hide-large w3-hide-medium w3-large">
    <a target="_blank" rel="nofollow" href="#" class="w3-bar-item w3-button w3-padding-large">Link 1</a>
    <a target="_blank" rel="nofollow" href="#" class="w3-bar-item w3-button w3-padding-large">Link 2</a>
    <a target="_blank" rel="nofollow" href="#" class="w3-bar-item w3-button w3-padding-large">Link 3</a>
    <a target="_blank" rel="nofollow" href="#" class="w3-bar-item w3-button w3-padding-large">Link 4</a>
  </div>
</div>

<script>
// Used to toggle the menu on small screens when clicking on the menu button
function myFunction() {
    var x = document.getElementById("navDemo");
    if (x.className.indexOf("w3-show") == -1) {
        x.className += " w3-show";
    } else { 
        x.className = x.className.replace(" w3-show", "");
    }
}
</script>

As written, it seems to work, but if I change the tab names to be something more relevant to me such as “Home”, “Research”, “Science Communication”, and “Personal” (deleting the line for “Link 4”), the code doesn’t work correctly. As I narrow my browser window, the bit for “Personal” goes onto a second line before the dropdown menu appears. How can I alter the code to trigger it sooner for switching to the navbar for small screens?