Reducir espacios Ho...
 
Avisos
Vaciar todo

Reducir espacios Hover menu gantry5

7 Respuestas
2 Usuarios
0 Reactions
441 Visitas
Lady Adriana
Respuestas: 221
Estimable Member
Topic starter
 

Hola y espero este bien.

Quiero reducir el tamaño del Hover en el menú, al pasarlo por los diferentes items del menu, veo que es muy alto para el tamaño de los elementos de menú y hace que el menú sea innecesariamente alto (adjunto captura 1)

De paso, si tienen otros códigos css que pueda aplicar para no estar preguntando mucho mejor en relación al tema del Hover.

En el item de menu inicio tengo una imagen reemplazando el texto, necesito que este hay.

Relaciono las diferentes consultas realizadas en torno a este tema:

Menu estatico Gantry5: https://www.webempresa.com/foro/32-Joomla-30/157360-Menu-estatico-gantry5.html

Reducir espacios en el menú gantry5: https://www.webempresa.com/foro/32-Joomla-30/157359-Reducir-espacios-en-el-men%C3%BA-gantry5.html

También adjunto el archivo custom.scss personalizado debidamente ordenado y comentado.

URL del sitio: Contenido solo visible a usuarios registrados


 
Respondido : 06/12/2017 1:58 pm
Jhon
 Jhon
Respuestas: 44989
Illustrious Member Moderator
 

Hola

El problema al parecer es debido a la imagen que has puesto como ítem de menú.

Prueba con el siguiente código:

.g-toplevel > li:first-child .g-menu-item-container{
  padding-bottom:0!important;;
  padding-top: 10px !important;
}

Con esto se reducirá un poco el alto de los elementos

Saludos.


 
Respondido : 06/12/2017 5:12 pm
Lady Adriana
Respuestas: 221
Estimable Member
Topic starter
 

Hola Jhon.

Con o sin imagen reemplazando el item de menu inicio, el hover se veria con el mismo alto en todos los items de menu, ya hice los ensayos.

Aplique el código, varie los valores, pero siguió igual.


 
Respondido : 06/12/2017 6:41 pm
Jhon
 Jhon
Respuestas: 44989
Illustrious Member Moderator
 

Hola

No veo los cambios aplicados, en qué archivo has puesto el código CSS que te envié?, envíanos la ruta del archivo

Saludos.


 
Respondido : 06/12/2017 9:05 pm
Lady Adriana
Respuestas: 221
Estimable Member
Topic starter
 

Jhon buenos días y disculpa, si, tienes razón, implemente el cambio y funciono bien, por último, si deseo cambiar el color del Hover ¿como lo haría? gracias


 
Respondido : 07/12/2017 5:18 pm
Jhon
 Jhon
Respuestas: 44989
Illustrious Member Moderator
 

Hola

Puedes usar este código CSS, cambiando blue por algún código de color:

#g-navigation .g-main-nav .g-toplevel > li:not(.g-menu-item-type-particle):not(.g-menu-item-type-module):hover{
	background-color:blue!important;;
}

Saludos.


 
Respondido : 07/12/2017 6:08 pm
Lady Adriana
Respuestas: 221
Estimable Member
Topic starter
 

Hola Jhon y muchas gracias por la ayuda, cierro el post, feliz dia.


 
Respondido : 07/12/2017 6:14 pm