メニューの開閉ができなくて困ってます【html,bootstrap,javascript】

前提・実現したいこと

https://dotinstall.com/lessons/spsite_html/45617
この動画のようにメニューの開閉をできるようにしたいのですが、Bootstrapと組み合わせると上手くボタンが作動しません。

問題の原因と解決策ご提示いただければ幸いですm(__)m

発生している問題

ボタンを押してもメニューが開かない

該当のソースコード

html
1<body>
2　<nav class="navbar navbar-expand-md navbar-light bg-light sticky-top">
3    <div class="container-fluid">
4        <a href="#" class="navbar-brand">My App</a>
5        <button class="navbar-toggler"  type="button">
6          <span class="navbar-toggler-icon" id="open_menu"></span>  
7        </button>
8        <nav id="menu">
9          <span id="close_menu">×</span>
10          <ul>
11            <li><a href="#">AAAA</a></li>  
12            <li><a href="#">BBBB</a></li>  
13            <li><a href="#">CCCC</a></li>  
14          </ul>
15        </nav>
16        <div class="collapse navbar-collapse">
17          <ul class="navbar-nav ml-auto">
18            <li class="nav-item"><a href="#" class="nav-link">Menu</a></li>  
19            <li class="nav-item"><a href="#" class="nav-link">Menu</a></li>  
20            <li class="nav-item"><a href="#" class="nav-link">Menu</a></li>  
21          </ul>
22        </div>
23      </div>
24  </nav>
25  
26  
27
28<script>
29    (function() {
30      'use strict';
31
32      var openMenu = document.getElementById('open_menu');
33      var closeMenu = document.getElementById('close_menu');
34      var menu = document.getElementById('menu');
35
36      openMenu.addEventListener('click', function() {
37        menu.classList.add('shown');
38      });
39
40      closeMenu.addEventListener('click', function() {
41        menu.classList.remove('shown');
42      });
43    })();
44</script>
45