Provides toggle icons for mobile usability

mobile_toggle_icons.html

<div id="mobile-icons">
    <span class="mobile-icon mobile-icon-search">Search</span>
    <span class="mobile-icon mobile-icon-menu">Menu</span>
</div>

mobile_toggle_icons.js

//TOGGLES
$('.mobile-icon-search').click(function() {
  $(".search").slideToggle('fast');
});
$('.mobile-icon-menu').click(function() {
  $(".secondary-menu").slideToggle('fast');
});

mobile_toggle_icons.scss

//------------------
//-- MOBILE ICONS --
//------------------
#mobile-icons {
  position: absolute;
  top: 0.5em;
  right: 1em;
  z-index: 10;

  .mobile-icon {
    cursor: pointer;
    float: left;
    margin-left: 0.5em;
    text-indent: -999px;
    overflow: hidden;
    position: relative;
    height: 36px;
    width: 36px;

    &:after {
      content: "";
      position: absolute;
    }
  }
  .mobile-icon-search:after {
    @include png-sprite(icon-search-big);
    left: 8px;
    top: 6px;
  }
  .mobile-icon-menu:after {
    @include png-sprite(icon-menu-big);
    left: 8px;
    top: 6px;
  }
}