Why is my navbar not collapsing correctly and displaying the dropdown button?

I've just started learning the basics and I'm sure there's alot wrong with this code, is this the wrong approach or am I atleast doing something right? :P https://jsfiddle.net/0cjwyuqe/

<nav class="navbar navbar-dark bg-dark navbar-expand text-nowrap">
<div class="container">
    <div class="row w-100 align-items-center">

        <div class="col-md-3">
            <a href="" class="navbar-brand justify-content-start">
                <h1 class="display-3" id="cont">TEST<span id="se">.SE</span></h1>
            </a>
        </div>
        <button type="button" class="navbar-toggler collapse" data-toggle="collapse" data-target="#navbar1">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="col-md-5">
            <div class="navbar-nav">
                <div class="collapse navbar-collapse" id="navbar1">
                    <a href="#" class="nav-item nav-link">TEST1</a>
                    <a href="#" class="nav-item nav-link">TEST2</a>
                    <a href="#" class="nav-item nav-link">TEST3</a>
                    <a href="#" class="nav-item nav-link">TEST4</a>
                    <a href="#" class="nav-item nav-link">TEST5</a>
                </div>
            </div>
        </div>

        <div class="col-md-1"></div>


        <div class="col-md-3">
            <div class="navbar-nav justify-content-end">
                <a href="#" class="nav-item nav-link mx-1 text-nowrap" id="login"><i class="fas fa-user-check mr-1"></i>Login</a>
                <a href="#" class="nav-item nav-link mx-1"><i class="fas fa-user-plus mr-1"></i>Register</a>
            </div>
        </div>
    </div>
</div>

Solution

You were very close, needed 2 changes only

on your navigation element, I changed class navbar-expand to navbar-expand-sm which says that navbar that the breakpoint for toggling horizontal (normal) and vertical (burger menu) style for the navbar is sm, it could be navbar-expand-md or navbar-expand-lg etc.
on your button with class navbar-toggler you had the class 'collapse' placed, which meant that the button had display:none and was not in the DOM

working snippet below with these 2 changes:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="app.css">
<link href="https://fonts.googleapis.com/css?family=Nunito:400,700&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/38a8bb4287.js" crossorigin="anonymous"></script>



<nav class="navbar navbar-dark bg-dark navbar-expand-sm text-nowrap">
  <div class="container">
    <div class="row w-100 align-items-center">

      <!-- TITLE -->

      <div class="col-md-3">
        <a href="" class="navbar-brand justify-content-start">
          <h1 class="display-3" id="cont">TEST<span id="se">.SE</span></h1>
        </a>
      </div>

      <!-- NAV TOGGLER -->
      <button type="button" class="navbar-toggler " data-toggle="collapse" data-target="#navbar1">
				<span class="navbar-toggler-icon"></span>
			</button>
      <!-- NAVIGATION -->

      <div class="col-md-5">
        <div class="navbar-nav">
          <div class="collapse navbar-collapse" id="navbar1">
            <a href="#" class="nav-item nav-link">TEST1</a>
            <a href="#" class="nav-item nav-link">TEST2</a>
            <a href="#" class="nav-item nav-link">TEST3</a>
            <a href="#" class="nav-item nav-link">TEST4</a>
            <a href="#" class="nav-item nav-link">TEST5</a>
          </div>
        </div>
      </div>

      <!-- SPACER -->

      <div class="col-md-1"></div>

      <!-- LOGIN -->

      <div class="col-md-3">
        <div class="navbar-nav justify-content-end">
          <a href="#" class="nav-item nav-link mx-1 text-nowrap" id="login"><i class="fas fa-user-check mr-1"></i>Login</a>
          <a href="#" class="nav-item nav-link mx-1"><i class="fas fa-user-plus mr-1"></i>Register</a>
        </div>
      </div>
    </div>
  </div>
</nav>

<!-- CONTENT -->

<div class="container"></div>



<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>