My main goal is to create a btn that play/pause the song on my wedding site. 
I got it to work on the desktop view port, but not on the phone. 

---

[![enter image description here](https://i.stack.imgur.com/CeEb0.png)](https://i.stack.imgur.com/CeEb0.png)
Notice the play btn on the far right, when clicking on it, it will play the song, the icon will toggle to pause, like this

[![enter image description here](https://i.stack.imgur.com/NZVj7.png)](https://i.stack.imgur.com/NZVj7.png)

So far so good, everything work perfectly fine. 

---

Here come the issue, here what it look like on the 400px

[![enter image description here](https://i.stack.imgur.com/bcIrC.png)](https://i.stack.imgur.com/bcIrC.png)

I see it, but, they're not clickable at all. 

I tried to inspect it, this is what I see.

[![enter image description here](https://i.stack.imgur.com/PjCBq.png)](https://i.stack.imgur.com/PjCBq.png)

I was thinking that I had the issue with z-index, I've tried to give one to my btn, but it still doesn't work. 

I'm a little stuck now, please feel free to give me any suggestions.

---

HTML
====

```
  <!--Header start -->
   <header>
    <!--menu start-->
    <div class="menu">
      <div class="navbar-wrapper" id="navbar">

        {{-- Music --}} -------------------------------------------------
        <div class="pull-right btn-music">
          <a class="pause_audio_btn hidden"><i class="fa fa-pause"></i></a>
          <a class="play_audio_btn"><i class="fa fa-play"></i></a>
        </div>
        {{-- Music --}} -------------------------------------------------

        <div class="container">
          <!--Logo -->
          <div class="logo">
            <img id="logo" src="/img/love/logo_pink.png" alt="Roth-Long-Wedding">
          </div>
          <div class="logo_phone hidden">
            <img src="/img/love/logo_pink.png" alt="Roth-Long-Wedding">
          </div>
          <div class="navwrapper">
            <div class="navbar navbar-inverse navbar-static-top">
              <div class="container">
                <div class="navArea">
                  <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
                  </div>
                  <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav" id="navigation">
                      <li class="menuItem" id="home"><a href="#wrapper">Home</a></li>
                      <li class="menuItem"><a href="#when">Count Down</a></li>
                      <li class="menuItem"><a href="#theCouple">Couple</a></li>
                      <li class="menuItem"><a href="#eventsSchedule">Events</a></li>
                      <li class="menuItem"><a href="#photoAlbum">Gallery</a></li>
                      <li class="menuItem"><a href="#theBlog">Accommodation</a></li>
                      <li class="menuItem"><a href="#rsvp">RSVP</a></li>
                    </ul>

                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- End Navbar -->
        </div>
      </div>
    </div>
    <!--menu end-->

    <!--video header start-->
    <div class="banner  row" id="banner">
      <div class="col-xs-12 col-sm-6 col-md-12 col-lg-12 noPadd slides-container" style="height:100%">
        <!--background slide show start-->
        <div class="slide into_firefly">

          <!--header text1 start-->
          <div class="container hedaer-inner ">
            <div class=" bannerText clearfix ">
             <h1>Long & Roth</h1>
             <h4>WE ARE GETTING MARRIED</h4>

             <p class="ruler"><span></span>
               <a class="pause_audio_btn hidden"><i class="fa fa-pause"></i></a>
               <a class="play_audio_btn"><i class="fa fa-play"></i></a>

               <span></span></p>

               <h4 class="date long">July 26th, 2016</h4>
               <h4 class="date short">-07.26.2016-</h4>
             </div>
             <p class="downArrow"><a href="#when"><i class="fa fa-chevron-down"></i></a></p>
           </div>
           <!--header text end-->
           <img src="/img/love/main/edit/retina.jpg" alt="Main Image">
        </div>    
        <!--background slide show end-->
      </div>
    </div>
    <!--banner end-->
  </header>
  <!--Header end -->

```