Docs

[ADBL]

Hi there!

I need the navbar (logo and menu) to _smoothly_ shrink on scroll. I’m using Integrity, with Integrity 1 demo installed as a starting point.

Incidentally, I think this would make for a great built-in option in the Header section of the customizer ;o)

I started from this post and tried tweaking this code:

CSS

/*BEGIN resize nav top*/
@media (min-width: 980px) {
    .x-navbar .x-navbar-inner,
    .x-navbar .x-brand img,
    .x-navbar .desktop .x-nav > li > a {
        transition: 0.25s all linear;
    }

  .x-navbar.navScroll .x-navbar-inner {
        min-height: 70px;
        transition: 0.25s all linear;

    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    }

.x-navbar .x-brand.img {
        margin-bottom:12px;
    }

.x-navbar.navScroll .x-brand img {
        width: 50px; 
    }
.x-navbar.navScroll .x-brand{
margin-top:10px;
}

    .x-navbar.navScroll .desktop .x-nav > li > a {
      height:60px;
     padding-top:0;
    }
}
/*END resize nav top*/

JS

jQuery(function($) {

$(window).scroll(function(){

if($(this).scrollTop()<=0) {
$('.x-navbar').removeClass('x-navbar-fixed-top x-container-fluid max width');
}

});

});

jQuery(document).ready(function($) {

// BEGIN resize nav top
  $(window).scroll(function() {
    var scrollPos = $(window).scrollTop(),
        navbar = $('.x-navbar');

    if (scrollPos > 150) {
      navbar.addClass('navScroll');
    } else {
      navbar.removeClass('navScroll');
    }
  });
//END resize nav top

    var $window     = $(window);
    var $this       = $(this);
    var $body       = $('body');
    var $navbar     = $('.x-navbar');
    var $topbar     = $('.x-topbar');
    var $logobar    = $('.x-logobar');
    var $navbarWrap = $('.x-navbar-fixed-top-active .masthead');

    if ( ! $body.hasClass('page-template-template-blank-3-php') && ! $body.hasClass('page-template-template-blank-6-php') && ! $body.hasClass('page-template-template-blank-7-php') && ! $body.hasClass('page-template-template-blank-8-php') ) {
    if ( $body.hasClass('x-boxed-layout-active') && $body.hasClass('x-navbar-fixed-top-active') && $body.hasClass('admin-bar') ) {
      $window.scroll(function() {
        var $adminbarHeight = $('#wpadminbar').outerHeight();
        var $menuTop        = $navbarWrap.offset().top - $adminbarHeight;
        var $current        = $(this).scrollTop();
        if ($current > $menuTop) {
          $navbar.addClass('x-navbar-fixed-top x-container-fluid max width');
          $topbar.addClass('x-topbar-fixed-top x-container-fluid max width');
          $logobar.addClass('x-logobar-fixed-top x-container-fluid max width');
        } else {
          $navbar.removeClass('x-navbar-fixed-top x-container-fluid max width');
          $topbar.removeClass('x-topbar-fixed-top x-container-fluid max width');
          $logobar.removeClass('x-logobar-fixed-top x-container-fluid max width');
        }
      });
    } else if ( $body.hasClass('x-navbar-fixed-top-active') && $body.hasClass('admin-bar') ) {
      $window.scroll(function() {
        var $adminbarHeight = $('#wpadminbar').outerHeight();
        var $menuTop        = $navbarWrap.offset().top - $adminbarHeight;
        var $current        = $(this).scrollTop();
        if ($current > $menuTop) {
          $navbar.addClass('x-navbar-fixed-top');
          $topbar.addClass('x-topbar-fixed-top');
          $logobar.addClass('x-logobar-fixed-top');
        } else {
          $navbar.removeClass('x-navbar-fixed-top');
          $topbar.removeClass('x-topbar-fixed-top');
          $logobar.removeClass('x-logobar-fixed-top');
        }
      });
    } else if ( $body.hasClass('x-boxed-layout-active') && $body.hasClass('x-navbar-fixed-top-active') ) {
      $window.scroll(function() {
        var $menuTop = $navbarWrap.offset().top;
        var $current = $(this).scrollTop();
        if ($current > $menuTop) {
          $navbar.addClass('x-navbar-fixed-top x-container-fluid max width');
          $topbar.addClass('x-topbar-fixed-top x-container-fluid max width');
          $logobar.addClass('x-logobar-fixed-top x-container-fluid max width');
        } else {
          $navbar.removeClass('x-navbar-fixed-top x-container-fluid max width');
          $topbar.removeClass('x-topbar-fixed-top x-container-fluid max width');
          $logobar.removeClass('x-logobar-fixed-top x-container-fluid max width');
        }
      });
    } else if ( $body.hasClass('x-navbar-fixed-top-active') ) {
      $window.scroll(function() {
        var $menuTop = $navbarWrap.offset().top;
        var $current = $(this).scrollTop();
        if ($current > $menuTop) {
          $navbar.addClass('x-navbar-fixed-top');
          $topbar.addClass('x-topbar-fixed-top');
          $logobar.addClass('x-logobar-fixed-top');
        } else {
          $navbar.removeClass('x-navbar-fixed-top');
          $topbar.removeClass('x-topbar-fixed-top');
          $logobar.removeClass('x-logobar-fixed-top');
        }
      });
    }
    }

});

The good point is that the navbar does smoothly shrink on scroll down.

The issues I’m still having are:

1. The logo isn’t resizing smoothly, just snapping from one size to the other. I tried setting the transition parameters to ease (vs. linear), to no avail.
2. Upon scrolling down, the menu items will go all the way up to the top of the page (vs. being centered vertically)
3. Upon scrolling back up, I’m losing the easing effect, and I’m seeing a two-step resize: first it snaps to near original size, then about 0.5s later it expands a bit further in height to full original size.

It would be great if you could help me fix this. Many thanks in advance.

[Paul R]

Hi,

To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Thanks

[ADBL]

This reply has been marked as private.

[ADBL]

Also, I’m noticing that in the mobile version (or lower browser window width), the navbar won’t stick.

Thanks!

[Joao]

Hi There,

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thanks

Joao

[ADBL]

This reply has been marked as private.

[Rad]

Hi there,

Please change this CSS,

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

to this

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

Then add this CSS for mobile navbar

@media ( max-width: 979px ) {
.x-navbar-fixed-top {
position: fixed !important;
top:0;
width:100%;
}
}

And this for the logo,

 .x-navbar .x-brand img {
  width: 150px;
  }

It needs initial width.

Thanks!

[ADBL]

Thanks a lot, looks much better. One tiny thing left. It seems that when it starts resizing, the position changes first, then the size. Any way to make both change at the same time?

Otherwise, I’m trying to figure out what parameter I would need to adapt to make it resize earlier or later upon scrolling?

I’m asking because ultimately, I’d like to have a full height slider above the masthead, then scroll until the navbar sticks, then resize upon further scroll.

MANY thanks.

[Joao]

Hi There,

Have changed your scroll point from 150 to 50 on your first Javascript

And added the following code to your Appereance > customizer > CSS

.x-navbar.navScroll .desktop .x-nav > li > a > span {
     margin-top: 30px;
}
@media (min-width: 980px) {
.x-navbar.navScroll .x-brand img {
     width: 100px;
}
}

It seems aligned and changing simultaneously .

Hope that helps

Joao

[ADBL]

Hating myself. I’ve overwritten your changes (and earlier from me) while saving from an old tab… But I think I can manage from here.

One last question: I got where to change the scroll point in the JS customizer, but this is absolute, right? If that’s not too much to ask again, how would I go about making the navbar resize only after it sticks (regardless of screen resolution, etc.).

I added a test slider to the home page of the site mentioned above, if you can stil take a look, just to let me know what I should adapt to the home page menu in this case (of course, I’d need another one on other pages, on the current basis).

This framework is awesome, and support quite stunning I must say…

THANKS.

[Rue Nel]

Hello There,

Thanks for the updates! To make the logo only change only if the navbar is fixed, please remove this code block:

@media (min-width: 980px) {
  .x-navbar.navScroll .x-brand img {
     width: 100px;
  }
}

You need to replace using this code instead:

@media (min-width: 980px) {
  .x-navbar.x-navbar-fixed-top.navScroll .x-brand img {
     width: 100px;
  }
}

Hope this helps. Please let us know how it goes.

[ADBL]

This reply has been marked as private.

[Rad]

This reply has been marked as private.

[ADBL]

AWESOME! Thanks a lot guys.

[Thai]

If you need anything else please let us know.

[Author]

Posts