Menu movil en versiónmd- lg -xl

[myuko]

Hola! Tengo un problema.

Intento poner el menú responsive (que sale en el móvil) en las vistas md-lg-xl, pero me es imposible. Actualmente viene por defecto en xs y sm según el archivo header.tpl

Este es el documento tal cual lo tengo ahora:

 

{block name='header_banner'}
  <div class="header-banner">
    {hook h='displayBanner'}
  </div>
{/block}

{block name='header_nav'}
  <nav class="header-nav">
    <div class="container">
      <div class="row">
        <div class="hidden-sm-down">

          <div class="col-md-3" id="_desktop_logo">
            <a href="{$urls.base_url}">
              <img class="logo img-responsive" src="{$shop.logo}" alt="{$shop.name}">
            </a>
          </div>

          <div class="col-md-6 col-xs-12">
            {hook h='displayNav1'}
          </div>
          <div class="col-md-3 right-nav">
              {hook h='displayNav2'}
          </div>
        </div>
        <div class="hidden-md-up text-sm-center mobile">
          <div class="float-xs-left" id="menu-icon">
            <i class="material-icons d-inline">&#xE5D2;</i>
          </div>
          <div class="float-xs-right" id="_mobile_cart"></div>
          <div class="float-xs-right" id="_mobile_user_info"></div>
          <div class="top-logo" id="_mobile_logo"></div>
          <div class="clearfix"></div>
        </div>
      </div>
    </div>
  </nav>
{/block}

{block name='header_top'}
  <div class="header-top">
    <div class="container">
       <div class="row">
        <!-- <div class="col-md-2 hidden-sm-down" id="_desktop_logo">
          <a href="{$urls.base_url}">
            <img class="logo img-responsive" src="{$shop.logo}" alt="{$shop.name}">
          </a>
        </div> -->
        <div class="col-4  position-static">
          {hook h='displayTop'}
          <div class="clearfix"></div>
        </div>
      </div>
      <div id="mobile_top_menu_wrapper" class="row hidden-md-up" style="display:none;">
        <div class="js-top-menu mobile" id="_mobile_top_menu"></div>
        <div class="js-top-menu-bottom">
          <div id="_mobile_currency_selector"></div>
          <div id="_mobile_language_selector"></div>
          <div id="_mobile_contact_link"></div>
        </div>
      </div>
    </div>
  </div>

 

  {hook h='displayNavFullWidth'}
{/block}

 

Adjunto imágenes de como se ve en mobil y como en escritorio*

La idea es poner el header exactamente sale en la versión móvil en las demás vistas.

¿alguien podría ayudarme? ¡Gracias!