Diferencia entre revisiones de «Fortun»
Ir a la navegación
Ir a la búsqueda
(Página creada con «DOCU FORTUN Hacer la barra de menú más pequeña 1. Primero tenemos que añadir esto en css: →Ajusta el height del menú se puede poner el tamaño que quieras: .nav-m…») |
|||
| Línea 3: | Línea 3: | ||
1. Primero tenemos que añadir esto en css: | 1. Primero tenemos que añadir esto en css: | ||
| − | /* Ajusta el height del menú se puede poner el tamaño que quieras*/ | + | /* Ajusta el height del menú se puede poner el tamaño que quieras*/ |
| − | .nav-menu { | + | .nav-menu { |
| − | + | line-height: 78px; | |
| − | } | + | } |
| − | /* Ajusta el height del fondo para que no se vea el blanco el tamaño tiene que ser igual que el del menú*/ | + | /* Ajusta el height del fondo para que no se vea el blanco el tamaño tiene que ser igual que el del menú*/ |
| − | .spacer{ | + | .spacer{ |
| − | + | height: 78px!important; | |
| − | } | + | } |
| − | 2. Para que esto no cambie cada vez que aparece el sticky tenemos que añadir lo siguiente en jQuery: | + | 2. Para que esto no cambie cada vez que aparece el sticky tenemos que añadir lo siguiente en jQuery: |
| − | jQuery(document).ready(function( $ ){ | + | jQuery(document).ready(function( $ ){ |
shrinkInit($); | shrinkInit($); | ||
| − | }); | + | }); |
| − | /* comprueba si existe la clase y cambia el color del texto de forma acorde DE FORMA RECURSIVA CADA 0.5s */ | + | /* comprueba si existe la clase y cambia el color del texto de forma acorde DE FORMA RECURSIVA CADA 0.5s */ |
| − | function shrinkInit($){ | + | function shrinkInit($){ |
function check_shrink(){ | function check_shrink(){ | ||
if ( $(".header-navigation-menu").hasClass("shrink-header-menu") ) { | if ( $(".header-navigation-menu").hasClass("shrink-header-menu") ) { | ||
| Línea 34: | Línea 34: | ||
} | } | ||
window.setInterval(check_shrink,100); | window.setInterval(check_shrink,100); | ||
| − | } | + | } |
Revisión del 11:50 3 ago 2020
DOCU FORTUN Hacer la barra de menú más pequeña 1. Primero tenemos que añadir esto en css:
/* Ajusta el height del menú se puede poner el tamaño que quieras*/
.nav-menu {
line-height: 78px;
}
/* Ajusta el height del fondo para que no se vea el blanco el tamaño tiene que ser igual que el del menú*/
.spacer{
height: 78px!important;
}
2. Para que esto no cambie cada vez que aparece el sticky tenemos que añadir lo siguiente en jQuery:
jQuery(document).ready(function( $ ){
shrinkInit($); });
/* comprueba si existe la clase y cambia el color del texto de forma acorde DE FORMA RECURSIVA CADA 0.5s */
function shrinkInit($){
function check_shrink(){
if ( $(".header-navigation-menu").hasClass("shrink-header-menu") ) {
$(".nav-menu").attr('style', 'line-height: 50px !important');
} else {
$(".nav-menu").css("line-height", "78px");
}
}
window.setInterval(check_shrink,100);
}
