title: JS dropdown menu being hidden? or not working?
body: <p>After thoroughly trying to fix this issue - I need a little help. </p>
  
  <p>I am trying to make a website that has a navbar (made with bootstrap) for websites and I am making a small drop-down menu for smaller screens (I haven't added this functionality yet, I just want it to work first). I haven't styled it much yet either. </p>
  
  <p>The problem is that I <em>know</em> my button and code is working (because I have a <a href="https://codepen.io/zaenaria/pen/OOZOBY" rel="nofollow noreferrer">codepen</a> showing that it works), but in my website, I cannot see the drop-down menu. Not sure if it is hidden or what but I just can't figure this out.</p>
  
  <p>Here is the HTML (because I have to put something...):</p>
  
  <pre><code>&lt;div class = "dropdown"&gt;
      &lt;button onclick = "menuBtn ()" class = "dropBtn"&gt;Menu&lt;/button&gt;
      &lt;div id = "dropCollapse" class = "dropdownContent"&gt;
          &lt;a class = "contentLinks" href = "#about"&gt;About&lt;/a&gt;
          &lt;a class = "contentLinks" href = "#team"&gt;Team&lt;/a&gt;
          &lt;a class = "contentLinks" href = "#photos"&gt;Photos&lt;/a&gt;
          &lt;a class = "contentLinks" href = "#shirts"&gt;T-Shirts&lt;/a&gt;
          &lt;a class = "contentLinks" href = "#contact"&gt;Contact&lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I have played around with z-index (in a number of places but if you have a suggestion, feel free to make it and I will try it). I have taken the menu out of the navbar (thinking it had something to do with that). But mostly I am just confused - nothing else really answered my question about this menu issue. I feel like there is something small that I am overlooking and I just can't figure it out. </p>
  
  <p>Here is a fiddle showing the basic outline of my website with the menu not working: <a href="https://jsfiddle.net/nekochan/eh69segg/1/" rel="nofollow noreferrer">https://jsfiddle.net/nekochan/eh69segg/1/</a></p>