Docs

[mathijs84]

It seems like the customizer can’t make the header smaller. I downloaded the church demo.

Is it in code maybe??

Site is nvision.work-planning.com.

I would like to make the menu bar like 50% smaller.

Also is it possible to change the logo when we scroll down??

[Rad]

Hi there,

Thanks for writing in.

Please provide a mockup design of your target size. Then please provide your admin login credentials for direct testing.

About the logo, please check this thread https://community.theme.co/forums/topic/different-logo-after-scrolling/

Hope that helps.

[Lely]

Hi There,

We can adjust the height on the menu bar in Appearance > Customize > Header > Navbar Top Height.

Please check this thread for changing logo when scrolling down:https://community.theme.co/forums/topic/replace-logo-with-another-on-scroll/

Hope this helps.

[mathijs84]

thanks i followed that thread. Only when scrolled down the header now gets bigger.

It is better if the header gets smaller. also when you scroll back up, the header should return to normal

[Joao]

Hi

If you are looking for a header tha gets smaller when you scroll down and bigger when you scroll back up. You can use this code below. Your header needs to be inline for this to work and also you will need to adjust the “px” on the code for the header and logo size according to your wishes.

Add this code to your Appearence / Customizer / CSS

.x-navbar.x-navbar-fixed-top .x-navbar-inner {
transition: min-height 0.5s ease;
-webkit-transition: min-height 0.5s ease;
}
.x-navbar .desktop .x-nav > li > a, .x-navbar .x-brand, .x-navbar .x-navbar-inner {
    -webkit-transition: height 0.5s ease, padding-top 0.5s ease;
    transition: height 0.5s ease, padding-top 0.5s ease;
}

.x-navbar .desktop .x-nav > li > a, .x-navbar .x-brand {
    -webkit-transition: min-height 0.5s ease;
    transition: min-height 0.5s ease;
}

.x-navbar.x-navbar-fixed-top .desktop .x-nav > li > a {
height: 60px;
padding-top: 25px;
}

.x-navbar.x-navbar-fixed-top .x-brand {
width: 150px;
margin-top: 0;
}

.x-navbar.x-navbar-fixed-top .x-navbar-inner {
min-height: 60px;
}

Add this code to your Appereance / Customizer / Javascript

jQuery(function($) {
  var $body   = $('body');
  var $navbar = $('.x-navbar');
  if ( $body.hasClass('x-navbar-fixed-top-active') && $navbar.length > 0 ) {
    var boxedClasses = '';
    if ( $body.hasClass('x-boxed-layout-active') ) {
      boxedClasses = ' x-container max width';
    }

    $(window).scroll(function() {
      if ( $(this).scrollTop() >= 60 ) {
        $navbar.addClass('x-navbar-fixed-top' + boxedClasses);
      } else {
        $navbar.removeClass('x-navbar-fixed-top' + boxedClasses);
      }
    });
  }
});

Hope that helps,

Joao

[mathijs84]

This reply has been marked as private.

[Rupok]

Hi there,

In that case, you could take off your other code for now to test. If that solve the issue then we could assist to figure out the overriding code.

Cheers!

[mathijs84]

I checked and it;s actually only this code which i think is not conflicting

/* push down site by height of menu */
body.page { margin-top:0px !important; }
}

/*
// MAke mobile menu sticky
*/

.taptap-menu-button-wrapper {
margin-top: -8px !important;
}

[Lely]

Hi There,

Glad you find it. Upon checking your site, the header now is shrinking upon scrolling down and then goes back to original size when on top. Can you confirm that this issue is now fixed?

Always,
X

[mathijs84]

Nope i didnt remove it and no difference.

When you first open the site you see a different logo. the full Nvision logo with the normal menu. When you scroll down you see the N. But this is way to big. And when you scroll back up again you shoudl see the normal logo again but you still see the N.

Also the header is still to big when you first scroll down. It should work just as http://www.bouwbedrijfheemskerk.nl only with different logo’s

[Rad]

Hi there,

That’s because you permanently change the logo through javascript. Please change this,

jQuery(function($) {
$(window).scroll(function() {
       if($('.x-navbar').hasClass('x-navbar-fixed-top')) {
               $('.x-navbar-fixed-top .x-brand img').attr('src','http://nvision.work-planning.com/wp-content/uploads/2016/05/32x32.png');
       }
});

});

to this,

jQuery(function($) {
$(window).scroll(function() {
       if($('.x-navbar').hasClass('x-navbar-fixed-top')) {
               $('.x-navbar-fixed-top .x-brand img').attr('src','//nvision.work-planning.com/wp-content/uploads/2016/05/32x32.png');
       } else {
               $('.x-navbar-fixed-top .x-brand img').attr('src','//nvision.work-planning.com/wp-content/uploads/2016/05/nVision_red_med_strak.png');
       }
});

});

Put the logo back when scrolled up, then change when scroll down.

Thanks!

[mathijs84]

Thanks Rad,

It looks better but stil not as it should

1: I now only see the original logo, also when you scroll down. The red N doenst show up.

2: In safari i see no regular menu and the mobile menu stays in there to long it seems

[Rue Nel]

Hello There,

It appears that there is an invalid JS code in your page:

Please update your code in the customizer using this:

jQuery(function($) {
  $(window).scroll(function() {
   if($(".x-navbar").hasClass("x-navbar-fixed-top")) {
      $(".x-navbar-fixed-top .x-brand img").attr("src","//nvision.work-planning.com/wp-content/uploads/2016/05/32x32.png");
   } else {
      $(".x-navbar-fixed-top .x-brand img").attr("src","//nvision.work-planning.com/wp-content/uploads/2016/05/nVision_red_med_strak.png");
   }
  });
});

Hope this helps.

[mathijs84]

I updated the code.

But problems still the same, that means.

1: We now see the N logo, but it is way to big. 2 When you scoll up the N doesnt change back to the regular logo.

2: Code doesnt work in safari. Menu is nog sticky and i see no menu items!!

[Rue Nel]

Hello There,

Please only place one block of code in your customizer. Right now what you have is this:

jQuery(function($) {
$(window).scroll(function() {
       if($('.x-navbar').hasClass('x-navbar-fixed-top')) {
               $('.x-navbar-fixed-top .x-brand img').attr('src','//nvision.work-planning.com/wp-content/uploads/2016/05/32x32.png');
       } else {
               $('.x-navbar-fixed-top .x-brand img').attr('src','//nvision.work-planning.com/wp-content/uploads/2016/05/nVision_red_med_strak.png');
       }
});

});

/*
//header kleiner
*/

jQuery(function($) {
  $(window).scroll(function() {
   if($(".x-navbar").hasClass("x-navbar-fixed-top")) {
      $(".x-navbar-fixed-top .x-brand img").attr("src","//nvision.work-planning.com/wp-content/uploads/2016/05/32x32.png");
   } else {
      $(".x-navbar-fixed-top .x-brand img").attr("src","//nvision.work-planning.com/wp-content/uploads/2016/05/nVision_red_med_strak.png");
   }
  });
});

The code works however it negates the action because of the second block of code. You only need one block of JS code. And then you need to add this custom css so that the logo image width will be correct.

.x-navbar .x-brand img,
.x-navbar.x-navbar-fixed-top .x-brand img {
  width: auto; 
  margin-top: 10px;   
}

Hope this helps.

[Author]

Posts