Diferencia entre revisiones de «Fortun»

De Apu
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…»)
 
 
(No se muestran 4 ediciones intermedias del mismo usuario)
Línea 1: Línea 1:
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 {
+
== 1. Hacer la barra de menú más pequeña ==
    line-height: 78px;
+
<br>
}
 
  
/* Ajusta el height del fondo para que no se vea el blanco el tamaño tiene que ser igual que el del menú*/
+
'''1.''' Primero tenemos que añadir esto en css:
  
.spacer{
+
/* Ajusta el height del menú se puede poner el tamaño que quieras*/
  height: 78px!important;
+
.nav-menu {
}
+
      line-height: 78px;
 +
}
  
2. Para que esto no cambie cada vez que aparece el sticky tenemos que añadir lo siguiente en jQuery:
+
/* 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;
 +
}
  
jQuery(document).ready(function( $ ){
+
'''2.''' Para que esto no cambie cada vez que aparece el sticky tenemos que añadir lo siguiente en jQuery:
  
   shrinkInit($);
+
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  */
+
/* 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 32:
 
     }
 
     }
 
     window.setInterval(check_shrink,100);
 
     window.setInterval(check_shrink,100);
}
+
}

Revisión actual del 11:55 3 ago 2020


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