Como poner una super posición de pantalla completa en Oxígeno

En este tutorial vamos a ver y a compartir cómo se hace una superposición de la pantalla completa que puede ser configurado para deslizarse hacia abajo desde la parte superior de la pantalla en un sitio Oxygen.

Paso 1

Para empezar si lo que desea es el icono del menú tipo (hamburguesa) que aparezca

en la cabecera del sitio, hay que editar la plantilla principal en Oxygen.

Tienes que Añadir un elemento de Icono en el lugar en el que se desea que aparezca el icono del menú.

Esto es típicamente en la fila de la derecha si está usando el menu del Header Builder de Oxygen.

screenshot 2iconos menu

Pon una clase al icono elegido.

Dependiendo de los conjuntos de iconos que hayas subido a Oxigen selecciona el que mas te guste de Font Awesome es el que viene predeterminado pero puedes subir tus propios conjuntos de iconos a Oxygen.

Paso 2

Abre el panel de Estructura y con el Cuerpo seleccionado, añades un Div.

  1. a) Cambie el ID por ejemplo a myNav.  Dale una clase de superposición.

Vaya a Avanzado > Diseño. Establezca la visualización como flexible. Luego Alinear elementos y

Justificar contenido al centro.

  1. b) Agregue un bloque de código dentro del Div.
screenshot 2screenshot 3
Añadir en el code Block
PHP & HTML:

<!-- Button to close the overlay navigation -->

<a href="javascript:void(0)" class="closebtn"

onclick="closeNav()">×</a>

CSS:

/* The Overlay (background) */

.overlay {

width: 100%;

height: 0;

position: fixed; /* Stay in place */

z-index: 1; /* Sit on top */

left: 0;

top: 0;

background-color: rgb(0,0,0); /* Black fallback color */

background-color: rgba(0,0,0, 0.9); /* Black w/ opacity */

overflow-x: hidden; /* Disable horizontal scroll */

transition: 0.5s; /* 0.5 second transition effect to slide

in or slide down the overlay (height or width, depending on

reveal) */

}

.overlay a {

color: #818181;

}

.overlay a:hover,

.overlay a:focus {

color: #f1f1f1;

}

/* Position the close button (top right corner) */

.overlay .closebtn {

position: absolute;

top: 20px;

right: 45px;

font-size: 60px;

}

/* When the width of the screen is 768px and below, change the

font-size of the links and position the close button again, so

they don't overlap */

@media screen and (max-width: 768px) {

#_nav_menu-4-824 .menu-item a {font-size: 20px}

.overlay .closebtn {

font-size: 40px;

top: 15px;

right: 35px;

}

}

 

Javascript:

/* Close */

function closeNav() {

document.getElementById("myNav").style.height = "0%";

}

// Look for .hamburger

var hamburger = document.querySelector(".hamburger");

// On click

hamburger.addEventListener("click", function() {

// open nav

document.getElementById("myNav").style.height = "100%";

});

  1. c) Añadir otro Div dentro del Div padre

Aquí es donde vamos a añadir nuestro contenido de superposición.

Dale una clase de contenido superpuesto.

Agregue un elemento de Menú dentro de este Div.

Seleccione Vertical para el diseño del menú.

Text:

Font size: 36px

Color: #818181

Text Align: Center

Hover & Active:

Hover Text Color: #f1f1f1

Hover Background Color: (none)

Hover Border Top: (none)

Dropdowns:

Uncheck “Enable Dropdowns”

Mobile Responsive:

Mobile Menu/Toggle Below: Never
menu pantalla completa
Listo de esta manera obtendrás una resolución y posición de pantalla completa en cualquier dispositivo. 
databasefile-emptyrocketthumbs-uplayers