Menu icon Foundation
DrillDonw Menu, medium size problem.

Trying I have managed to switch the DrillDown menu as a responsive menu.

In "Small" it looks correctly (on the left and at 100% of the screen width). The problem is in "Medium" scrolling menu to the right and does not occupy 100% of the screen width.

How could you get "Medium" to look as shown in "Small"?

Thank you very much.

drilldownResponsivemedium

Trying I have managed to switch the DrillDown menu as a responsive menu.

In "Small" it looks correctly (on the left and at 100% of the screen width). The problem is in "Medium" scrolling menu to the right and does not occupy 100% of the screen width.

How could you get "Medium" to look as shown in "Small"?

Thank you very much.

Edgardo 2 months ago

include captures /  small correct and medium error. 

 

Rafi Benkual 2 months ago

 Can you share your HTML for this so we can help more?

Edgardo 2 months ago

<header>

  <section id="header-menu">

    <div id="social-bar">

      <div class="row">

        <div class="columns">

          <p class="text-right"><a href="https://www.facebook.com/" target="_blank" title="Visitanos en Facebook"><i class="fab fa-facebook"></i></a><a href="https://www.youtube.com/" target="_blank"><i class="fab fa-youtube"></i></a><a href="#"><i class="fas fa-phone"></i></a><a href="#"><i class="fab fa-whatsapp"></i></a><a href="contacto.html"><i class="fas fa-envelope"></i></a></p>

        </div>

      </div>

    </div>

    <div class="title-bar" data-responsive-toggle="responsive-menu" data-hide-for="large">

      <div class="title-bar-title"><a href="temporal.html"><img src="img/layout/logo-FC-seguridad-industrial-web.png" alt="FC Seguridad Industrial - Marcos Juárez prov. Córdoba."></a></div>

      <div class="title-bar-right">

        <button class="menu-icon " type="button" data-toggle="responsive-menu"></button>

      </div>

    </div>

    <div class="top-bar" id="responsive-menu">

      <div class="top-bar-left">

        <ul class="dropdown menu" data-dropdown-menu>

          <li class="menu-title show-for-large">

            <div class="" id="logo-principal"> <a href="temporal.html"><img src="img/layout/logo-FC-seguridad-industrial-web.png" alt="FC Seguridad Industrial - Marcos Juárez prov. Córdoba."></a> </div>

          </li>

        </ul>

      </div>

      <div class="top-bar-right">

        <ul class="menu vertical large-horizontal" data-responsive-menu="drilldown large-dropdown" data-auto-height="true" data-animate-height="true">

          <li><a href="#">Indumentaria</a>

            <ul class="menu">

              <li><a href="#">Ropa de Trabajo</a></li>

              <li><a href="#">Ropa de Oficina</a></li>

            </ul>

          </li>

          <li><a href="#">Calzados</a>

            <ul class="menu">

              <li><a href="#">Calzados de Seguridad</a></li>

              <li><a href="#">Calzados de Trabajo</a></li>

            </ul>

          </li>

          <li><a href="#">Protecciones</a>

            <ul class="menu">

              <li><a href="#">Craneana</a></li>

              <li><a href="#">Ocular</a></li>

              <li><a href="#">Facial</a></li>

              <li><a href="#">Manos</a></li>

              <li><a href="#">Auditivas</a></li>

              <li><a href="#">Respiratoria</a></li>

            </ul>

          </li>

          <li><a href="#">Señalización</a></li>

          <li><a href="contacto.html">Contacto</a></li>

        </ul>

      </div>

    </div>

  </section>

</header>

 

Edgardo 2 months ago

<header>
  <section id="header-menu">
    <div id="social-bar">
      <div class="row">
        <div class="columns">
          <p class="text-right"><a href="https://www.facebook.com/" target="_blank" title="Visitanos en Facebook"><i class="fab fa-facebook"></i></a><a href="https://www.youtube.com/" target="_blank"><i class="fab fa-youtube"></i></a><a href="#"><i class="fas fa-phone"></i></a><a href="#"><i class="fab fa-whatsapp"></i></a><a href="contacto.html"><i class="fas fa-envelope"></i></a></p>
        </div>
      </div>
    </div>
    <div class="title-bar" data-responsive-toggle="responsive-menu" data-hide-for="large">
      <div class="title-bar-title"><a href="temporal.html"><img src="img/layout/logo-FC-seguridad-industrial-web.png" alt="FC Seguridad Industrial - Marcos Juárez prov. Córdoba."></a></div>
      <div class="title-bar-right">
        <button class="menu-icon " type="button" data-toggle="responsive-menu"></button>
      </div>
    </div>
    <div class="top-bar" id="responsive-menu">
      <div class="top-bar-left">
        <ul class="dropdown menu" data-dropdown-menu>
          <li class="menu-title show-for-large">
            <div class="" id="logo-principal"> <a href="temporal.html"><img src="img/layout/logo-FC-seguridad-industrial-web.png" alt="FC Seguridad Industrial - Marcos Juárez prov. Córdoba."></a> </div>
          </li>
        </ul>
      </div>
      <div class="top-bar-right">
        <ul class="menu vertical large-horizontal" data-responsive-menu="drilldown large-dropdown" data-auto-height="true" data-animate-height="true">
          <li><a href="#">Indumentaria</a>
            <ul class="menu">
              <li><a href="#">Ropa de Trabajo</a></li>
              <li><a href="#">Ropa de Oficina</a></li>
            </ul>
          </li>
          <li><a href="#">Calzados</a>
            <ul class="menu">
              <li><a href="#">Calzados de Seguridad</a></li>
              <li><a href="#">Calzados de Trabajo</a></li>
            </ul>
          </li>
          <li><a href="#">Protecciones</a>
            <ul class="menu">
              <li><a href="#">Craneana</a></li>
              <li><a href="#">Ocular</a></li>
              <li><a href="#">Facial</a></li>
              <li><a href="#">Manos</a></li>
              <li><a href="#">Auditivas</a></li>
              <li><a href="#">Respiratoria</a></li>
            </ul>
          </li>
          <li><a href="#">Señalización</a></li>
          <li><a href="contacto.html">Contacto</a></li>
        </ul>
      </div>
    </div>
  </section>
</header>

Edgardo 2 months ago

 

 

Edgardo about 1 month ago
Rafi Benkual about 1 month ago

You can make the top-bar right class expand full width like this: https://codepen.io/rafibomb/pen/dgvPgx

Edgardo about 1 month ago

Perfect!!!!!  work properly


Thank you....