Diferencia entre revisiones de «Fortun»

De Apu
Ir a la navegación Ir a la búsqueda
 
(No se muestran 3 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:
+
== 1. Hacer la barra de menú más pequeña ==
 +
<br>
 +
 
 +
'''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;
 
       line-height: 78px;
Línea 10: Línea 12:
  
 
  /* 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;
 
     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(){

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