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

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.

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

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);
}