0

Tengo un problema espero alguien me pueda ayudar, tengo un menú con Materialize y en versión móvil se ve bien pero cuando lo veo en versión PC se ve blanco ¿Alguien sabría porque?, vi todas sus clases y esta bien, estoy usando el framework Materialize CSS para el Front-End.

Mi código actual:

<!--<nav style="background:#ff7334;"  class=" lighten-1" role="navigation">-->
   <ul class="side-nav">
                <img style="padding-left:10px;" src="img/logo.png" width="70" height="60">
<li><a  href="producto2.html">Azulejo</a></li>
        <li><a  href="producto3.html">Barro</a></li>
        <li><a  href="producto4.html">Block</a></li>
        <li><a  href="producto5.html">Cantera</a></li>
        <li><a  href="producto6.html">Esculturas reducidas</a></li>
        <li><a  href="producto7.html">Fuentes</a></li>
        <li><a  href="producto8.html">Granito</a></li>
        <li><a  href="producto9.html">Iluminación</a></li>
        <li><a href="producto10.html">Jacuzzi</a></li>
        <li><a  href="producto11.html">Ladrillo refractario</a></li>
        <li><a  href="producto12.html">Mármol</a></li>
        <li><a  href="producto13.html">Piedras decorativas</a></li>
        <li><a  href="producto15.html">Piso</a></li>
        <li><a  href="producto17.html">Sanitarios</a></li>
        <li><a  href="producto16.html">Tejas</a></li>      </ul>
      <ul  id="nav-mobile" class="side-nav">
<li><a  href="producto2.html">Azulejo</a></li>
        <li><a  href="producto3.html">Barro</a></li>
        <li><a  href="producto4.html">Block</a></li>
        <li><a  href="producto5.html">Cantera</a></li>
        <li><a  href="producto6.html">Esculturas reducidas</a></li>
        <li><a  href="producto7.html">Fuentes</a></li>
        <li><a  href="producto8.html">Granito</a></li>
        <li><a  href="producto9.html">Iluminación</a></li>
        <li><a href="producto10.html">Jacuzzi</a></li>
        <li><a  href="producto11.html">Ladrillo refractario</a></li>
        <li><a  href="producto12.html">Mármol</a></li>
        <li><a  href="producto13.html">Piedras decorativas</a></li>
        <li><a  href="producto15.html">Piso</a></li>
        <li><a  href="producto17.html">Sanitarios</a></li>
        <li><a  href="producto16.html">Tejas</a></li>      </ul>
      <a href="#" data-activates="nav-mobile" class="button-collapse"><i class="material-icons">menu</i></a>
                 <img style="padding-left:10px;" src="img/logo.png" width="70" height="60">

    </div>
  </nav>

Mi propósito es crear el mismo menú para la screen PC y móvil.

1 respuesta 1

0

el problema tuyo era no tomar en cuenta la clase .nav-wrapper,luego conversite la etiqueta inicial nav como resultado tenemos que sólo se ejecutaba la versión responsive, posteriormente tomaste en cuenta dos veces la etiqueta img para tu logo, sólo bastaba con una agregandola antes de la etiqueta ul, aquí esta el código corregido, espero te sea de ayuda, éxitos

<nav style="background:#ff7334;"  class=" lighten-1" role="navigation">
        <a href="index.html" class="brand-logo right" ><img src="#" width="70" height="60"></a>
     <a href="#" data-activates="nav-mobile" class="button-collapse"><i class="material-icons">menu</i></a>
    <div class="nav-wrapper">
   <ul class="right hide-on-med-and-down">
                <li><a  href="producto2.html">Azulejo</a></li>
        <li><a  href="producto3.html">Barro</a></li>
        <li><a  href="producto4.html">Block</a></li>
        <li><a  href="producto5.html">Cantera</a></li>
        <li><a  href="producto6.html">Esculturas reducidas</a></li>
        <li><a  href="producto7.html">Fuentes</a></li>
        <li><a  href="producto8.html">Granito</a></li>
        <li><a  href="producto9.html">Iluminación</a></li>
        <li><a href="producto10.html">Jacuzzi</a></li>
        <li><a  href="producto11.html">Ladrillo refractario</a></li>
        <li><a  href="producto12.html">Mármol</a></li>
        <li><a  href="producto13.html">Piedras decorativas</a></li>
        <li><a  href="producto15.html">Piso</a></li>
        <li><a  href="producto17.html">Sanitarios</a></li>
        <li><a  href="producto16.html">Tejas</a></li>      </ul>
    <ul  id="nav-mobile" class="side-nav">
                <li><a  href="producto2.html">Azulejo</a></li>
        <li><a  href="producto3.html">Barro</a></li>
        <li><a  href="producto4.html">Block</a></li>
        <li><a  href="producto5.html">Cantera</a></li>
        <li><a  href="producto6.html">Esculturas reducidas</a></li>
        <li><a  href="producto7.html">Fuentes</a></li>
        <li><a  href="producto8.html">Granito</a></li>
        <li><a  href="producto9.html">Iluminación</a></li>
        <li><a href="producto10.html">Jacuzzi</a></li>
        <li><a  href="producto11.html">Ladrillo refractario</a></li>
        <li><a  href="producto12.html">Mármol</a></li>
        <li><a  href="producto13.html">Piedras decorativas</a></li>
        <li><a  href="producto15.html">Piso</a></li>
        <li><a  href="producto17.html">Sanitarios</a></li>
        <li><a  href="producto16.html">Tejas</a></li>
        </ul>
    </div>
  </nav>
1
  • muchas gracias por tu comentario me sirvio para ver otra forma de solucionar el problema @LanzMarz , la solucion que encontre es que necesitaba agregar el id -> id="nav-mobile" a los menu para que se vieran version movil en cualquier dispositivo.
    – simon
    Commented el 16 jun. 2017 a las 0:45

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.