Menu estatico gantry5  

Hola Lady.

Gantry5 funciona con particulas que puedes ir añadiendo, digamos que son módulos con funciones que los añades desde el administrador de gantry.

En este enlace tienes partículas para descargar, unas son de pago y otras son gratuitas, entre las gratuitas tienes " Fixed Header " y su función es la que buscas.

https://www.inspiretheme.com/gantry5-particles

Las partículas suelen ser compatibles tanto para joomla como para wordpress, existen algunas que solo funcionan en uno de los dos pero lo indica.

Un saludo

Hola pepe y gracias por responder

Esa solucion en efecto podria servir si, al ver el demo de esa particula ( http://demo.inspiretheme.com/particles/index.php/atoms/fixed-header) fijate que al hacer scroll, tambien oculta la primera linea donde esta el logo dejando solo el menu y necesito que el menu junto con los modulos encima de el queden estaticos tal y como mi sitio web de produccion mira (portalnews.co)

Al instalar la particula Fixer Header copiando los archivos en la carpeta particles, segun la captura de pantalla veo que el gantry ya la instalo, pero al arrastrarla al cajon para habilitarla no deja ¿que pasó hace falta? vi el tutorial que aparece junto a la descarga pero el enseña algo relacionado con SlideShow.....

Hola Lady Adriana,

Reviso la web Contenido solo visible a usuarios registrados y no veo que tengas aplicado el "Fixed Header" para ver el comportamiento e indicarte como dejar la primera barra superior fija junto con el menú al hacer scroll.

¿Donde has configurado esta funcionalidad?

Saludos

Hola alejo

Ya instale el Atomo Fixed Header, no se que otra configuracion deba ir en las opciones del atomo, adjunto captura de pantalla.

Hola Lady.

¿ Utilizas los dos Framework Gantry 5 y 4 ?

no se que otra configuracion deba ir en las opciones del atomo
Tienes que instalar UIkit for Gantry5 para que te funcionen las partículas, puedes descargarlo desde el mismo enlace que te pase.

Un saludo

Pepe buenos dias.

¿ Utilizas los dos Framework Gantry 5 y 4 ?

Actualmente tengo el pack Palene con G4 que compre a WebEmpresa, hace un par de dias decidi cambiarme a G5 y quiero dejar mi web en lo posible exactamente con la apariencia que actualmente tengo, hice el cambio porque G5 otorga mejor manejo de espacios para ciertas funciones que necesito cosa que G4 ya no ofrece, una ves configurado y testeado todo a profundidad en el sitio de ensayo, la idea es desinstalar G4.

Ya instale el UIkit for Gantry5 adjunto captura 1.

Hola Lady.

pero vamos a ver que me aclare.
¿ La nueva web la tienes en una instalación independiente ? es decir que tienes tu web en producción y en otra carpeta distinta tienes la nueva web ( Dos instalaciones distintas )

¿ en la nueva web tienes instalado gantry4 y gantry5, los dos en la misma instalación?

Ya instale el UIkit for Gantry5
ok, pues entonces solo tienes añadir la posición que quieres que se quede estática en Fixed Header

Otra opción es por código con css, creía que lo anterior te resultaría mas fácil, prueba añadir lo siguiente:

#g-navigation {
margin-top: 100px;
}

@media (min-width: 960px) and (max-width: 1199px) {
    #g-header {
         position: fixed;
         right: 0;
         top: 0;
         z-index: 100;
    }
    body {
         margin-top: 150px;
    }
    }
 @media (min-width: 1200px) {
    #g-header {
         left: 0;
         position: fixed;
         right: 0;
         top: 0;
         z-index: 100;
    }
    body {
         margin-top: 80px;
    }
    }
    
    
    
 @media (min-width: 960px) and (max-width: 1199px) {
    #g-navigation {
         position: fixed;
         right: 0;
         top: 0;
         z-index: 100;
    }
    body {
         margin-top: 150px;
    }
    }
 @media (min-width: 1200px) {
    #g-navigation {
         left: 0;
         position: fixed;
         right: 0;
         top: 0;
         z-index: 100;
    }
    body {
         margin-top: 150px;
    }
    }

Un saludo

Hola Pepe. respondere en orden tus inquietudes.

¿ La nueva web la tienes en una instalación independiente ? es decir que tienes tu web en producción y en otra carpeta distinta tienes la nueva web ( Dos instalaciones distintas )

Correcto si señor, mi web en produccion esta en public_html

Y en otra carpeta llamada "ensayo" tengo mi web de pruebas

En si, mi web de produccion la tengo desde el 2015 cuando compre los servicios con web empresa e instale el pack palene el cual venia con G4

Y pensando en una manera de trabajar y mejorar la web sin poner en riesgo mi web principal, la clone y realice un proceso de restauracion con Akeeba en la carpeta "ensayo" con usuarios y base de datos independientes en el Phpmyadmin y hay tengo mi web de pruebas.

¿ en la nueva web tienes instalado gantry4 y gantry5, los dos en la misma instalación?

Al realizar el proceso anterior se clono todo, de modo que si, en mi web de pruebas tengo todo lo que tengo en mi web de produccion, continuamente realizo este proceso para no estar desfazado en los cambios que quiero ir implementando.

Ya instale el UIkit for Gantry5

Pero fijate que al entrar en la configuracion de ese atomo, no me indica añadir la posición donde quiero que se quede estática en Fixed Header (añado captura 1)

Finalmente, mas bien opte por poner el codigo en el custom.scss y veo que en efecto ya el menu y el bloque de arriba estan estaticos, sin embargo, fijate que se desborda, la idea es que quede exactamente igual al menu de mi web en produccion.

Hola

Prueba definir un ancho máximo para los elementos fixed, por ejemplo prueba con el siguiente código:

#g-header >.g-grid,
#g-navigation >.g-grid{
	max-width:1200px;
  margin:auto;
}

Saludos.

Hola Jhon.

Puse el codigo en el custom.scss limpie cache de joomla, limpie cache de Chrome, recargue varias veces y no sucedio nada, no hubo ningun cambio.

Hola

Actualmente ya lo veo centrado, tal como se muestra en la imagen adjunta, he probado en firefox y chrome.

Saludos.

Hola Jhon.

Como quizás notaste, tenía un tema abierto llamado "Reducir espacios en el menú gantry5" en su momento, Pepe me dijo en una de las respuestas en ese tema, que teníamos temas abiertos por otro lado, pero fijate que tu me dices " Hola, Actualmente ya lo veo centrado, tal como se muestra en la imagen adjunta, he probado en firefox y chrome. Saludos."

Y en efecto, cuando estábamos en ese hilo (y aun en este) el menú ya estaba centrado, es la razón por la que había abierto dos hilos antes, fueron dos consultas diferentes, una en relación a que el menú se quedará estático (que es este hilo) y otro a fin de reducir esos espacios que están sobrando (que es el otro hilo https://goo.gl/PxBv9P y que decidimos cerrar y terminar de tratar por aquí) mi error, quizás fue no tratar ambos temas en el mismo hilo, pero ustedes piden no mezclar los temas cuando son diferentes, por eso lo hice así.

En todo caso y para continuar con el tema del otro hilo ( https://goo.gl/PxBv9P) y terminar de tratarlo por aqui, adjunto captura de pantalla de lo que estoy solicitando, remover esos espacios que están entre el menú y la línea de arriba donde tengo 4 elementos, los que estan en amarillo según el archivo adjunto.

Hola lady.

Añade lo siguiente:

#g-header {
    height: 70px;
}

Modifica la siguiente lina #g-navigatio por la siguiente:

#g-navigation {
  margin-top: 70px;
}

Un saludo

Hola pepe.

Agregue el codigo al custom.scss y funciono, sin embargo, debajo del menu se ve una franja gris, limpie cache de Joomla y temporales, tambien cache de Chrome y firefox y sigue mostrando la franja, inclusive, ensaye en otro Pc con pantalla mas ancha, adjuntare imagenes donde se evidencia la franja gris.

Tambien subo el archivo custom,scss comentado y ordenado con todo lo que se ha hecho hasta el momento para que por favor lo miremos.