Plantilla con Gumby problema en el menu

[Eddy Ramos]

Hola amigos
Despues de buscar por todo el foro no encuentro una ayuda, por lo que les escribo.
Estoy trabajando una plantilla con Gumby CSS pero ahora quiero adaptarlo a WordPress, el problema lo tengo en el menu.
Gumby pide la siguiente estructura

Código HTML:

<nav>
    <ul>
        <li><a href="<?php echo site_url(); ?>">Inicio</a></li>
        <li><a href="#">Sección A</a>
            <div class="dropdown">
                <ul>
                    <li><a href="#">Sección A1</a>
                    <li><a href="#">Sección A2</a>
                </ul>
            </div>
    </ul>
</nav>
 

Mientras WordPress no entrega el div donde se encuentra la clase "dropdown". Les muestro como estoy llamando al menu.

Código PHP:

<?php
    wp_nav_menu(
        array(
            'menu' => 'menu_principal',
            'container' => 'nav',
            'container_class' => 'navbar clearfix'
            // Me falta aqui algo para indicar que agrege el div en los submenus
        )
    );
?>
 

Les agradezco si me pueden ayudar, sera de gran utilidad. De antemano gracias.

[Eddy Ramos]

Agrego el estilo que trae el Gumby en ui.css comienza en la linea 972.

Aquí la classe .dropdown esta de la linea 154 a la 212

Código CSS:

/*=====================================================
 
   Navigation (with dropdowns)
    
 ======================================================*/
 
    
    .navbar {
        width: 100%;
        display: table;
        border: 1px solid #1d692d;
        margin-bottom: 20px;
        background: #5dbb73; /* Change this to suit the color theme of your site */
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
        box-sizing: border-box;
    }
    
    .navbar .logo {
        display: table-cell;
        height: 55px;
        margin: 0;
        line-height: 0;
        vertical-align: middle;
    }
    
    .navbar .logo a {
        display: block;
        height: 55px;
        line-height: 60px;
        padding: 0 0 0 15px;
        overflow: hidden;
    }
    
    .navbar a.toggle {
      display: none;
    }
    
    .navbar ul {
        display: table;
        width: 100%;
        float: none;
        vertical-align: middle;
        margin-bottom: 0;
    }
    
    .navbar ul li {
        display: table-cell;
        float: none;
        list-style-type: none;
        margin-bottom: 0;
        margin-left: 0;
        text-align: center;
        border-right: 1px solid #114a1e;
    }
    
    .navbar > ul > li > a {
        display: block;
        height: 55px;
        line-height: 55px;
        font-size: 16px;
        padding: 0 15px;
        white-space: nowrap;
        color: #fff;
        font-weight: bold;
        text-shadow: 0 1px 2px #114a1e,
                                 0 1px 0 #114a1e;
    }
    
    .navbar > ul > li .field {
        position: relative;
        display: inline-block;
        text-align: center;
    }
    
    .navbar > ul > li .field .search input {
        line-height: 14px;
    }
    
    .navbar > ul > li:hover > a {   
        position: relative;
        background: #05390a;
        z-index: 1000;
    }
    
    .navbar > ul > li > li > a {
        padding: 0 33px;
    }
    
    .navbar > ul > li:last-child, .navbar > ul > li:last-child a:hover {
        border-right: none;
    }
    
    
    /**** Navbar positioning for Microsoft's browser who deserves not to be mentioned ****/
    .ie7 .navbar > ul { width: auto; }
 
    .ie7 .navbar, .ie7 .navbar > ul > li > a { display: block; }
    
    .ie7 .navbar .logo, .ie7 .navbar ul, .ie7 .navbar ul li { float: left; display: inline-block; }
    
    .ie7 .navbar .logo a { display: block; overflow: hidden; }
    
    .ie7 .navbar > ul > li .field { display: block; padding: 12px 18px 0; width: 80%; }
    
    /******** Pretty Navbar Styles *********/
    
    .pretty.navbar {
        border-radius: 4px;
        
        background: -moz-linear-gradient(top, #5dbb73 0%, #2d9047 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5dbb73), color-stop(100%,#2d9047)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, #5dbb73 0%,#2d9047 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, #5dbb73 0%,#2d9047 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top, #5dbb73 0%,#2d9047 100%); /* IE10+ */
        background: linear-gradient(top, #5dbb73 0%,#2d9047 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5dbb73', endColorstr='#2d9047',GradientType=0 ); /* IE6-9 */
        
        -webkit-box-shadow: inset 0 1px 1px #94dda6,
            0 1px 2px rgba(0,0,0,0.61) !important; /* Remove this line if you dont want a dropshadow on your navigation*/
        box-shadow: inset 0 1px 1px #94dda6,
                    0 1px 2px rgba(0,0,0,0.61) !important; /* Remove this line if you dont want a dropshadow on your navigation*/
    }
    
    .pretty.navbar li {
        -webkit-box-shadow:
            inset 1px 0 0 #94dda6;
        box-shadow:
            inset 1px 0 0 #94dda6;
    }
    
    .pretty.navbar ul:first-child li:first-child a {
        border-radius: 4px 0 0 4px;
    }
    
    .pretty.navbar ul li:last-child a {
        border-radius: 0 4px 4px 0;
    }
    
    .pretty.navbar > ul > li:hover > a {
        -webkit-box-shadow: 2px 0 0 #114a1e;
        box-shadow: 2px 0 0 #114a1e;
    }
    
    .pretty.navbar > ul > li:first-child, .pretty.navbar > ul > li:first-child a:hover {    
        box-shadow: none;
    }
    
    
    
    /******** CSS3 Dropdown Menu Styles **********/
    
    .navbar li .dropdown {
        width: auto;
        min-width: 0px;
        max-width: 380px;
        height: 0;
        position: absolute;
        background: #fff;
        overflow: hidden;
        z-index: 999;
    }
    
    .navbar li:hover .dropdown {
        min-height: 60px;
        max-height: 500px;
        height: auto;
        width: 100%;
        padding: 0;
        border-top: 1px solid #1d692d;
        
        -webkit-box-shadow: 0px 3px 4px rgba(0,0,0,.3);
        box-shadow: 0px 3px 4px rgba(0,0,0,.3);
    
    
        -webkit-transition: ease-in-out .2s;
        -moz-transition: ease-in-out .2s;
        -o-transition: ease-in-out .2s;
        -ms-transition: ease-in-out .2s;
        transition: ease-in-out .2s;
    }
 
    .navbar li .dropdown ul {
        margin: 0;
    }
    
    .navbar li .dropdown ul > li {
        display: block;
        width: 100%;
        float: left;
        text-align: left;
        height: auto;
        font: 16px "Helvetica Neue", arial, sans-serif;
        border-radius: none;
    }
    
    .navbar li .dropdown ul > li a {
        display: block;
        line-height: 26px;
        height: 26px;
        padding: 10px 20px;
        border-bottom: 1px solid #ddd;
    }
    
    .navbar ul .dropdown ul li:first-child a {
        border-radius: 0;
    }
    
    .navbar li .dropdown li a:hover {
        background: #ebfeee;
    }
    
    @media only screen and (max-width: 767px) {
        
        .navbar, .pretty.navbar {
          position: relative;
        background: transparent;
        border: none;
        text-align: center;
      }
      
      .navbar .logo {
        float: left;
        display: inline;
      }
      
      .navbar a.toggle {
        position: relative;
        float: right;
        display: inline-block;
        right: 10px; /* Move me around */
        top: 10px; /* Move me around */
        background: #3c8f4f;
        width: 42px;
        height: 36px;
        line-height: 42px;
        border-radius: 4px;
        -webkit-transition-duration: .1s;  /* Saf3.2+, Chrome */
        -moz-transition-duration: .1s;  /* FF4+ */
        -ms-transition-duration: .1s;  /* IE10 */
        -o-transition-duration: .1s;  /* Opera 10.5+ */
        transition-duration: .1s;
      }
      
      .pretty.navbar a.toggle {
        border: 1px solid #1d692d;
        
        background: -moz-linear-gradient(top, #5dbb73 0%, #2d9047 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5dbb73), color-stop(100%,#2d9047)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, #5dbb73 0%,#2d9047 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, #5dbb73 0%,#2d9047 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top, #5dbb73 0%,#2d9047 100%); /* IE10+ */
        background: linear-gradient(top, #5dbb73 0%,#2d9047 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5dbb73', endColorstr='#2d9047',GradientType=0 ); /* IE6-9 */
        
        -webkit-box-shadow: inset 0 1px 1px #94dda6,
            0 1px 1px #94dda6;
        box-shadow: inset 0 1px 1px #94dda6,
          0 1px 1px #94dda6;
      }
      
      .navbar a.toggle:hover, .navbar a.toggle.active {
        background: #5dbb73;
        -webkit-box-shadow: none;
        box-shadow: none;
        -webkit-transition-duration: .1s;  /* Saf3.2+, Chrome */
        -moz-transition-duration: .1s;  /* FF4+ */
        -ms-transition-duration: .1s;  /* IE10 */
        -o-transition-duration: .1s;  /* Opera 10.5+ */
        transition-duration: .1s;
      }
      
      .navbar a.toggle.active {
        background: #114a1e;
      }
      
      .navbar ul {
        position: absolute;
        width: 93.75%;
        height: 0;
        max-height: 0;
        top: 54px;
        right: 3.125%;
        overflow: hidden;
        display: inline-block;
        
        background: #fff;
        border-radius: 4px;
 
        -webkit-transition-duration: .2s;  /* Saf3.2+, Chrome */
        -moz-transition-duration: .2s;  /* FF4+ */
        -ms-transition-duration: .2s;  /* IE10 */
        -o-transition-duration: .2s;  /* Opera 10.5+ */
        transition-duration: .2s;
        
        -webkit-box-shadow: 0px 3px 4px rgba(0,0,0,.3);
        box-shadow: 0px 3px 4px rgba(0,0,0,.3);
      }
      
      .navbar ul.active {
        width: 93.75%;
        height: auto;
        max-height: 600px;
        z-index: 999;
        -webkit-transition-duration: .5s;  /* Saf3.2+, Chrome */
        -moz-transition-duration: .5s;  /* FF4+ */
        -ms-transition-duration: .5s;  /* IE10 */
        -o-transition-duration: .5s;  /* Opera 10.5+ */
        transition-duration: .5s;
      }
      
      .navbar ul li {
        display: block;
        width: 100%;
        border-right: 0 !important;
        -webkit-box-shadow: none;
        box-shadow: none;
      }
 

[zanguanga]

Te ha faltado pegar el HTML que te devuelve WordPress, seguramente no te devuelve un div, sino un ul. Aún así supongo que es mucho más fácil y más limpio retocar el CSS que crear una función para que te cree otro div innecesario y poco semántico ¿no? ¿o quieres hacerlo así por alguna razón que no llego a comprender?

[Eddy Ramos]

Pues hice un primer intento muy rapido, modifique el CSS pero queda desplegado el submenu.

Quedando así el estilo:

Código CSS:

/******** CSS3 Dropdown Menu Styles **********/
 
    .navbar li .dropdown ,
    .navbar li .sub-menu{
        width: auto;
        min-width: 0px;
        max-width: 380px;
        height: 0;
        position: absolute;
        background: #fff;
        overflow: hidden;
        z-index: 999;
        display: none;
    }
 
    .navbar li:hover .dropdown ,
    .navbar li:hover .sub-menu{
        min-height: 60px;
        max-height: 500px;
        height: auto;
        width: 100%;
        padding: 0;
        border-top: 1px solid #1d692d;
 
        -webkit-box-shadow: 0px 3px 4px rgba(0,0,0,.3);
        box-shadow: 0px 3px 4px rgba(0,0,0,.3);
 
 
        -webkit-transition: ease-in-out .2s;
        -moz-transition: ease-in-out .2s;
        -o-transition: ease-in-out .2s;
        -ms-transition: ease-in-out .2s;
        transition: ease-in-out .2s;
    }
 
    .navbar li .dropdown ul ,
    .navbar li  ul.sub-menu {
        margin: 0;
    }
 
    .navbar li .dropdown ul > li ,
    .navbar li  ul.sub-menu > li {
        display: block;
        width: 100%;
        float: left;
        text-align: left;
        height: auto;
        font: 16px "Helvetica Neue", arial, sans-serif;
        border-radius: none;
    }
 
    .navbar li .dropdown ul > li a ,
    .navbar li  ul.sub-menu > li a {
        display: block;
        line-height: 26px;
        height: 26px;
        padding: 10px 20px;
        border-bottom: 1px solid #ddd;
    }
 
    .navbar ul .dropdown ul li:first-child a ,
    .navbar ul  ul.sub-menu li:first-child a {
        border-radius: 0;
    }
 
    .navbar li .dropdown li a:hover ,
    .navbar li .sub-menu li a:hover {
        background: #ebfeee;
    }
 

Estoy probando crear las platillas con gumbyframework.com he visto hablar mucho de este Framework.
Ahora estoy intentando de usar con las propiedades del wordpress.
Hare una segunda prueba esperando quede mejor.

Saludos zanguanga

[Eddy Ramos]

Solucionado

Despues de mucho mover el CSS no consegui el resultado, por lo que pensando un buen rato se me ocurrio agregar el div faltante con jQuery

Código Javascript:

$('.sub-menu').wrap('<div class="dropdown" />');
 

Me despido de este tema, espero les sirva en un futuro y dejen sus comentarios