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.
Índice del artículo
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 > 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:
- El primero es CSS y debes pegarlo en: Divi > Opciones del Tema > General > La caja de abajo de CSS
- 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" />
