[SolomonParticipant]

Hi,

I’d like my Topbar to stick, together with my main navbar, when I scroll down my site. I tried out some of the codes mentioned in the following thread and they half worked (my comments are at the bottom*).
– The Topbar sticks but the main menu now jumps to a lower position when I scroll down the site.
*https://community.theme.co/forums/topic/x-topbar-with-fixed-position/

I would also like my logo and navbar to resize (shrink in size in a smooth transition) when I scroll down the site. I found some info on this in the following thread but the codes did not work. https://community.theme.co/forums/topic/jquery-sticky-header-that-shrinks-when-scrolling-down/

My website is the following: http://selfknowledgemanagement.org/

Thanks for your help!

[Nabeel AModerator]

Hi there,

Thanks for writing in! To fix the jumping issue and shrinking the Navbar and logo, just add the following code in your Customizer via Appearance > Customize > Custom > CSS:

.x-navbar-fixed-top {
    top: 50px !important;
    height: 100px !important;
}

.x-navbar-fixed-top a.x-brand.img {
    width: 150px !important;
}

Let us know how this goes!

[SolomonParticipant]

Hi,

thanks for your help. The code that you provided does make the navbar shrink but the menu buttons are no longer centred and a bit too low. The shrinking is also very abrupt, is there a straight forward way to create a gradual transition, like in the following website? http://www.quaest.net/operations/

With the above code, the navbar stays in the right place, but the topbar disappears and leaves a gap. Is there a way of setting it to stay fixed?

Many thanks.

[RadModerator]

Hi there,

It works okay on my end,

Probably cache at your end, please clear it before testing. And you may provide recording of what you’re getting.

Thanks!

[SolomonParticipant]

Hi, sorry, that might be a misunderstanding. This is my website: http://selfknowledgemanagement.org/

and I’d like the effect to be like the website you’re visiting in the video.
( http://www.quaest.net/operations/ )

[Paul RModerator]

Hi,

To achieve that effect, you can add this under Custom > CSS in the Customizer.

body .x-topbar {
    position:fixed;
    top:0;
    width:100%;
}

body .x-navbar {
    position: fixed;
    top: 50px;
    width: 100%;
}

Hope that helps.

[SolomonParticipant]

Hi, thanks.

Is it possible for the menu buttons to move up to the centre of the navbar when the whole thing shrinks? Right now they remain in the original position and are too low.

The transition is quite abrupt, not gradual, is it possible to adjust this?

At the moment, the navbar shrinks when scrolling down the screen but does not increase to the original size when scrolling back to the top. Can this be rectified?

[Paul RModerator]

Hi,

You can add this under Custom > CSS in the Customizer.

.x-navbar {
   transition: all 0.5s ease;
}

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

Then add this in custom > Javascript box

jQuery(function($) {
    $(window).scroll(function(){ 
        if($(window).scrollTop()<=0) {
              $('.x-navbar').removeClass("x-navbar-fixed-top");
      }
    });
});

Hope that helps.

[SolomonParticipant]

Thank you, that does work. However, the transition is quite ‘messy’ as the navbar disappears before shrinking or resizing and reveals the background layer. Can this be improved?

Many thanks for your help and patience!

[Rue NelModerator]

Hello There,

Please add this custom css code in your customizer as well. This will add transition to other elements too.

body .x-topbar,
.x-navbar.x-navbar-fixed-top,
.x-navbar .x-brand img,
.x-navbar.x-navbar-fixed-top .desktop .x-nav > li > a{
    transition: all 0.5s ease;
}

.x-navbar.x-navbar-fixed-top .x-brand img {
    height: 80px !important;
    width: auto;
    transition: all 2s ease;
}

Please let us know if this works out for you.

[SolomonParticipant]

Hi,

no, unfortunately that last code does strange things to my logo and doesn’t resolve the navbar appearing and disappearing issue.

[Rue NelModerator]

Hello There,

Please remove all the code we gave you. This would give us a fresh start to copy the effect in the example website you gave. In that site, he is using this custom css in the customizer.

/*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*/

And he also added this custom javascript code in the customizer, Appearance > Customize > Custom > Javascript

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

});

As this is all custom development, regretfully we won’t be able to assist further. Custom development is outside the scope of our support. We’re happy to provide advice and get you started in the right direction, but you would still be responsible for the implementation.

Thank you for your understanding.

[SolomonParticipant]

Yes, I understand. I’ve decided not to shrink the menu bar for now as the new code you gave me plays up in a different way again – it seems to be quite a complicated feature in general and perhaps is not necessary for me to pursue at this time.

Many thanks for your great support!

[ThaiModerator]

You’re most welcome 🙂

[Author]

Posts