navbar nav assistance

Cannot get the navicon to function upon clicking/tapping. Everything else is in position as desired. What is hindering it? - This is all tucked within a sticky header.

The first part of the code is the stnd desktop menu layoutout.... then the navicon is introduced with its menu for tablet/mobile phones.

<div class="col-sm-12 col-lg-12 clearfix">

<div class="horizontalRule"></div>

<div class="shop-menu pull-left hidden-xs">

    <ul class="nav navbar-nav">

    <li><a class="page-scroll" href="#About">About</a></li>

    <li><a class="page-scroll" href="#Products">Products</a></li>

    <li><a class="page-scroll" href="#Contact">Contact</a></li>

    </ul>

</div></div>

<div id="headerToggle" class="header-bottom">

    <div class="container">

    <div class="row">

    <div class="col-sm-4">

    <div class="navbar-header">

    <a class="navbar-toggle" role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">

      <span class="sr-only">Toggle navigation</span>

    <span class="icon-bar"></span>

    <span class="icon-bar"></span>

    <span class="icon-bar"></span>

    </a>

    </div>

</div></div>

</div></div>

<div class="collapse" id="collapseExample">

<div class="mainmenu pull-left">

<div id="mainMenu" class="nav navbar-nav collapse navbar-collapse hidden-sm hidden-md hidden-lg">

    <ul class="nav navbar-nav">

    <li><a class="page-scroll" href="#About">About</a></li>

    <li><a class="page-scroll" href="#Products">Products</a></li>

    <li><a class="page-scroll" href="#Contact">Contact</a></li>

    </ul>

</div></div>                                   

</div>

Thank you!