Configurando el header y el área de menú ancho completo en metro pro Genesis Framework

¡Hola! ¿Como están? En  este tutorial veremos como configurar el functions.php de nuestro tema metro pro de Génesis Framework para crear un menú y un header de ancho completo.

1. Vamos a entrar al archivo functions.php de nuestro tema www.tuweb.com/wp-content/themes/metro-pro/functions.php, buscamos mas o menos por la linea 77.

metromenudd

A si  es como se ve, ahora vamos a agregarle el numero 4 y se tiene que ver a si:

menuuuuu

en la parte  «genesis_do_subnav», 4  agregamos un 4

 

2. Ahora  pegamos este código en nuestro functions.php


remove_action( 'genesis_header', 'genesis_header_markup_open', 5 );
remove_action( 'genesis_header', 'genesis_do_header' );
remove_action( 'genesis_header', 'genesis_header_markup_close', 15 );
add_action( 'genesis_before', 'genesis_header_markup_open', 5 );
add_action( 'genesis_before', 'genesis_do_header' );
add_action( 'genesis_before', 'genesis_header_markup_close', 15 );
remove_action( 'genesis_after_header', 'genesis_do_nav' );
add_action( 'genesis_before', 'genesis_do_nav', 16 );

y listo ya tenemos nuestro menú de ancho completo.

3.Ahora vamos a darle un poco de estilo para acomodar el titulo de nuestro sitio web.

Estos es el css que utilice claro tu puedes darle tus propios estilos de acuerdo al diseño con tu web:

.nav-secondary {
background-color: #000;
text-align: right;
}

esto lo utilize en el .nav-secundary.

.genesis-nav-menu {
/*background: #024795;*/

}

Comente el background en .genesis-nav-menu.


.nav-primary {
background-color: #000;
}

En .nav-primary le cambie el color a negro


.genesis-nav-menu {
/*background: #024795;*/
}

En Genesis-nav-menu comente el background.


.site-header {
background: hsla(0,0%,100%,0.8);
}

En site header le agregue  una transparencia de 0.8 esto lo puedes modificar de acuerdo a tu gusto.
.site-title {
font-family: ‘Oswald’, sans-serif;
font-size: 48px;
font-size: 4.8rem;
line-height: 1;
margin: 0 0 16px;
margin: 0 0 1.6rem;
text-transform: uppercase;margin-bottom: 0;
margin-top: 9.5px;
margin-top: 0.95rem;
}
y por ultimo le vamos  le proporcionamos  un margen a nuestro .site-title para que todo quede perfecto.
Cualquier duda por favor  déjamela en los comentarios espero te guste y disfrutes este tuto.
El tutorial en ingles : https://sridharkatakam.com/full-width-header-navigation-metro-pro/

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

once + siete =