Docs

[trollkarlsliv]

Hi!

I’m setting up a site for a client and have a question regarding the header / navbar. For the desktop nav I wanted the logo to be big when you first enter the site, and then resize to a smaller size as you scroll (the navbar is sticky). Found a great solution for that in another thread here, thanks for that. But I would need to tweak that code a bit, because the navbar isn’t sticky on mobile device.

Here is the CSS + javascript that I’m using for the sticky, resizing header:

/*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;
background-color: rgba(255,255,255,0.7) !important;

    box-shadow: none;
    }

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

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

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

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

});

I tried to remove the @media-query from the CSS, but that only shrank the logo on mobile when scrolling, it didn’t make it sticky. So I wonder, how can I make the navbar sticky on mobile as well?

Thanks in advance!

[Thai]

Hi There,

Could you please provide us with your website URL so we can take a closer look?

Thank you.

[trollkarlsliv]

Hi there! I actually managed to figure this out with help from a friend instead. But thanks anyway!

[Rad]

Glad to hear that and welcome!

[Author]

Posts