Muchos de mis alumnos me preguntan cómo hago esto o lo de más allá en mi web y algunas de las cosas que hay están hechas con código CSS u otros códigos.

Uso poco CSS porque como puedes leer en este artículo no soy muy amigo de meter CSS ni código en mis webs ni la de mis clientes, pero te dejo aquí las que uso y dónde coloco cada código por si tú quieres hacer cosas parecidas a las mías.

Todos los códigos CSS que uso los pongo en Divi > Opciones del tema > En la caja de CSS de abajo. Si usas otro tema diferente a Divi tendrás que ponerlo en dónde proceda en el tema que uses.

Código CSS para poner un botón (o destacar una pestaña) en el menú de Divi

Lo primero es que vayas a APARIENCIA > MENÚ y en la pestaña que quieras destacar le pongas la palabra cta en el campo CLASES CSS.

Si en el desplegable del MENU que quieres destacar no ves el campo CLASES CSS ve a la parte superior derecha de tu pantalla y pulsa en OPCIONES DE PANTALLA para activarlo.

Una vez hecho eso te vas a DIVI > OPCIONES DEL TEMA y en la caja de CSS pegas este código


/*------------------------------------------------*/
/*--DESTACAR CON UN FONDO EN UN ENLACE DEL MENU---*/
/*------------------------------------------------*/

.cta {border-radius: 0px;}
.cta a {color: #284775!important;}
li.cta {
background-color:#dd9933;
font-weight: 700;
padding: 8px 8px 10px 10px!important;
border-radius: 5px;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
transition: all 0.5s;}
li.cta:hover {background-color:#dd9933;}

/* fixed header button text color */
.et-fixed-header #top-menu .cta a {
color: #fff!important;}
.cta li.current-menu-ancestor > a, .cta li.current-menu-item > a {
color: #fff !important;}

 
@media only screen and (min-width : 981px) {
li.cta {height: 33px;}}

Código CSS para Ocultar VER CARRITO en la página de CAJA de WooCommerce

Si usas Divi, pega esto en Divi > Opciones del tema > En la caja para CSS de abajo.

/* Ocultar VER CARRITO en la página de CAJA de WooCommerce */
.woocommerce .woocommerce-message {
display: none;
}

Código CSS para quitar el teléfono en el menú secundario o Top en Divi

Si usas Divi, pega esto en Divi > Opciones del tema > En la caja para CSS de abajo.

/* Quita teléfono en el menú secundario o superior de Divi */
et-info-phone { display:none !important }

Código CSS para destacar con un fondo (o convertir en botón) un enlace del menú en Divi

Si usas Divi, pega esto en Divi > Opciones del tema > En la caja para CSS de abajo. Y después ve a Apariencia > Menús y en Opciones de Pantalla (arriba a la derecha) activa Clases CSS y luego en el texto del menú que quieras destacar pon: destacado-menu

<!-- wp:paragraph -->
<p>/<em>------------------------------------------------</em>/<br>/<em>--DESTACAR CON UN FONDO EN UN ENLACE DEL MENU---</em>/<br>/<em>------------------------------------------------</em>/</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>.destacado-menu &gt; a {<br>background-color: #E09900;<br>color: #fff;<br>padding-top: 10px;<br>margin-top: -5px;<br>margin-bottom: 3px;<br>padding-left: 5px;<br>padding-right: 5px;<br>border-radius: 4px;<br>}</p>
<!-- /wp:paragraph -->

Código CSS para hacer más ancho el menú desplegable en Divi

Si usas Divi, pega esto en Divi > Opciones del tema > En la caja para CSS de abajo.

/————–ANCHO MENU DESPLEGABLE————/
/————————————————/
top-menu li li a {
width: 460px;
}
.nav li ul {
width: 480px;
}

Línea por los menús al pasar con el ratón

Si usas Divi, pega esto en Divi > Opciones del tema > En la caja para CSS de abajo.

/*** LÍNEA BAJO EL MANÚ AL PASAR CON EL RATÓN ***/
#top-menu .current-menu-item a::before,
#top-menu .current_page_item a::before {
 content: "";
 position: absolute;
 z-index: 2;
 left: 0;
 right: 0;
}
#top-menu li a:before {
 content: "";
 position: absolute;
 z-index: -2;
 left: 0;
 right: 100%;
 bottom: 50%;
 background: #dd9933; /*** COLOR DE LA LINEA INFERIOR ***/
 height: 3px; /*** GROSOR DE LA LINEA INFERIOR ***/
 -webkit-transition-property: right;
 transition-property: right;
 -webkit-transition-duration: 0.3s;
 transition-duration: 0.3s;
 -webkit-transition-timing-function: ease-out;
 transition-timing-function: ease-out;
}
#top-menu li a:hover {
 opacity: 1 !important;
}
#top-menu li a:hover:before {
 right: 0;
}
#top-menu li li a:before {
 bottom: 10%;
}

Código CSS para poner sombras en los menús al pasar con el ratón en Divi

Si usas Divi, pega esto en Divi > Opciones del tema > En la caja para CSS de abajo.

/------------------------------------------------/
/-------------[GQ - FLOATING SHADOW]-------------/
/------------------------------------------------/
#top-menu li {
    padding-right: 5px;}

#top-menu > li > a {
    padding: 15px 15px!important;
    margin-bottom: 15px;}

#top-menu .menu-item-has-children > a:first-child:after {
    display:none;}

#top-menu-nav > ul > li > a {
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    background: #ffffff;
    color: #E28A0D;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform;
    transition-property: transform;}

#top-menu-nav > ul > li > a:before {
    pointer-events: none;
    position: absolute;
    z-index: -1;
    content: '';
    top: 100%;
    left: 5%;
    height: 10px;
    width: 90%;
    opacity: 0;
    background: -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.35) 0%, transparent 80%);
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, transparent 80%);
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform, opacity;
    transition-property: transform, opacity;}

#top-menu-nav > ul > li > a:hover, 
#top-menu-nav > ul > li > a:focus, 
#top-menu-nav > ul > li > a:active {
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
    opacity: 1;
    background: #154575;}

#top-menu-nav > ul > li > a:hover:before, 
#top-menu-nav > ul > li > a:focus:before, 
#top-menu-nav > ul > li > a:active:before {
    opacity: 1;
    -webkit-transform: translateY(5px);
    transform: translateY(5px);}

Código CSS para cambiar el tamaño de los H2 en los móviles

Si usas Divi, pega esto en Divi > Opciones del tema > En la caja para CSS de abajo.

/————————————————/
/—TAMAÑO H2 EN MÓVILES—-/
/————————————————/
@media screen and (max-width:720px) {
h2 {
font-size: 30px !important;
}

Código para colapsar el Menú de Divi en el móvil y que aparezca el símbolo + en lugar de todos los submenús

Aquí debes pergar 2 códigos:

  1. El primero es CSS y debes pegarlo en: Divi > Opciones del Tema > General > La caja de abajo de CSS
  2. El segundo es Javascript y debes pegarlo en Divi > Opciones del Tema > Integración > Head (es la primera caja) y en los botones de arriba debes tener activado: Activar código del cabecera

CÓDIGO CSS:

/*-----------------------------------------------------------------------------------------------*/
/*--CSS COLASPSAR O PLEGAR MENU EN EL MOVIL - TAMBIÉN HAY JAVASCRIPT EN EL HEAD DE INTEGRACION---*/
/*-----------------------------------------------------------------------------------------------*/

.et_pb_menu .et_mobile_menu .menu-item-has-children > a,
#main-header .et_mobile_menu .menu-item-has-children > a {
    background-color: transparent;
    position: relative;
}

.et_pb_menu .et_mobile_menu .menu-item-has-children > a:after, #main-header .et_mobile_menu .menu-item-has-children > a:after {
    font-family: 'ETmodules';
    text-align: center;
    speak: none;
    font-weight: 600;
    font-variant: normal;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
    position: absolute;
    font-size: 18px;
    content: '\4c';
    top: 11px;
    right: 13px;
}

.et_pb_menu .et_mobile_menu .menu-item-has-children.visible > a:after,
#main-header .et_mobile_menu .menu-item-has-children.visible > a:after {
    content: '\4d';
}

.et_pb_menu .et_mobile_menu ul.sub-menu,
#main-header .et_mobile_menu ul.sub-menu,
.et-db #et-boc .et-l .et_pb_menu .et_mobile_menu li ul.sub-menu {
    display: none !important;
    visibility: hidden !important;
    transition: all 1.5s ease-in-out;
}

.et_pb_menu .et_mobile_menu li.visible > ul.sub-menu,
#main-header .et_mobile_menu li.visible > ul.sub-menu,
.et-db #et-boc .et-l #main-header .et_mobile_menu li.visible > ul.sub-menu,
.et-db #et-boc .et-l .et_pb_fullwidth_menu .et_mobile_menu li.visible > ul.sub-menu,
.et-db #et-boc .et-l .et_pb_menu .et_mobile_menu li.visible > ul.sub-menu {
    display: block !important;
    visibility: visible !important;
}

CÓDIGO JAVASCRIPT:

<!-- COLAPSAR MO PLEGAR MENU MOVIL - TAMBIÉN HAY OTRA PARTE EN EL CSS -->
<script>
jQuery(document).ready(function($){
    function ds_setup_collapsible_submenus() {
        var $menu = $('.et_mobile_menu'),
        top_level_link = '.et_mobile_menu .menu-item-has-children > a';
        
        $menu.find('a').each(function() {
            $(this).off('click');
            if ( $(this).is(top_level_link) ) {
                $(this).attr('href', '#');
            }

            if ( ! $(this).siblings('.sub-menu').length ) {
                $(this).on('click', function(event) {
                    $(this).parents('.mobile_nav').trigger('click');
                });
            } 
            else {
                $(this).on('click', function(event) {
                    event.preventDefault();
                    $(this).parent().toggleClass('visible');
                });
            }
        });
    }
    setTimeout(function() {
        ds_setup_collapsible_submenus();
    }, 700);
 });

   
</script>

Código para cambiar el color del menú en el navegador en el móvil

Este código debes pegarlo en Divi > Opciones del Tema > Integración > Head (es la primera caja) y en los botones de arriba debes tener activado: Activar código de cabecera

<!-- CAMBIAR EL COLOR DEL NAVEGADOR en el móvil -->
<meta name="theme-color" content="#284775" />
¿Qué puntuación le das?
[Total: 1 Media: 5]

para emprender online ¡de verdad!

7 Cursos Gratis

Soy Gonzalo

Responsable de los datos: Gonzalo de la Campa Marinas
Finalidad: Enviarte información. | Legitimación: Consentimiento

Destinatarios: Mailchimp | Duración: hasta que te des de baja.

Derechos e información adicional: Puedes ver todos los detalles en la política de privacidad

Te envío mis Trucos
para Conseguir Clientes

Responsable de los datos: Gonzalo de la Campa Marinas
Responsable: Gonzalo de la Campa | Finalidad: Enviarte información. 

Legitimación: Consentimiento | Destinatarios: Mailchimp

Duración: hasta que te des de baja. | Derechos e información adicional: Puedes ver todos los detalles en la política de privacidad

¿Dónde te envío mis

7 Cursos Gratis?

Responsable de los datos: Gonzalo de la Campa Marinas
Responsable: Gonzalo de la Campa | Finalidad: Enviarte información. 

Legitimación: Consentimiento | Destinatarios: Mailchimp

Duración: hasta que te des de baja. | Derechos e información adicional: Puedes ver todos los detalles en la política de privacidad

Dime dónde te envío la clase

de Crear Cursos Online

Responsable de los datos: Gonzalo de la Campa Marinas
Finalidad: Enviarte información. | Legitimación: Consentimiento

Destinatarios: Mailchimp y ProfesionalHosting | Duración: hasta que te des de baja.

Derechos e información adicional: Puedes ver todos los detalles en la política de privacidad

Abrir chat
1
1. ¿Quieres apuntarte a algún Curso Gratis o de Pago con mi soporte directo? Soy Gonzalo, cuéntame y te ayudo encantado.

2. Si eres ya alumno y tienes dudas de soporte debes escribirme a soporte@escuelaemprende.com