CSS logic to show/hide a wrapper with navigation on small screens using the target selector instead of Javascript.

nav.less

// --------------------------------- */
// menu logic
// --------------------------------- */

#siteheader {
  .menu-wrapper {
    max-height: 0;
    overflow: hidden;
  }
  .hidemenu {
    display:none;
  }
  &:target {
    .showmenu { display: none; }
    .hidemenu {
      display: block;
      @media screen and (min-width: @screen-sm-min){
        display:none;
      }
    }
    .menu-wrapper {
      max-height: 999em;
    }
  }
  @media screen and (min-width: @screen-sm-min){
    .showmenu,
    .hidemenu {
      display: none;
    }
    .menu-wrapper {
      max-height: none;
    }
  }
}

siteheader.html

<header id="siteheader">
  <div class="container">
    
    <h1 class="siteheader-title">
      <a class="logo" href="/">...SITE NAME...</a>
    </h1>

    <div class="nav-wrapper">

      <!-- small screen menu controls -->
      <a class="showmenu" href="#siteheader">Show menu</a>
      <a class="hidemenu" href="#">Hide menu</a>

      <!-- wrapper, hidden on small screen -->
      <div class="menu-wrapper">
        <nav class="mainmenu">
          <ul>...</ul>
        </nav>
        <nav class="topmenu">
          <ul>...</ul>
        </nav>
      </div>

    </div>
    
  </div>
</header>