[Nabeel AModerator]

Glad we could help.

Cheers!

[fattymembraneParticipant]

Hi. I’ve tried this on a site I’m building and the menu looks fine when the page loads, and when the user scrolls down, but on returning to the top of the page, the menu doesn’t return to full-size properly:

http://www.yeremianlaw.com/employment/employment-discrimination-lawyer-los-angeles/

Here’s a video:
http://www.screencast.com/t/zluodPxRW

[ChristopherModerator]

Hi there,

Please add the following code in Customize -> Custom -> JavaScript :

jQuery(function($) {

$(window).scroll(function(){

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

});

});

Hope it helps.

[fattymembraneParticipant]

Thanks. I’ve added the code and flushed all caches, but I still seem to be getting the same issue.

[Rue NelModerator]

Hello There,

The code isn’t working because you have inserted an invalid JS code in your customizer. You are not allowed to enter any div tag in that section. Please correct and replace it the valid code. It will create more and more issues.

Please post the full contents of your custom js code so we can help you correct it.

Thank you.

[fattymembraneParticipant]

Thanks. Removing the tracking codes that were in there fixed it. Can I add these pieces of JS to the X Google Analytics plugin instead of the Customizer, or will that not accept div/img tags either?

[ChristopherModerator]

Hi there,

If it’s google analytic code you can add it in X’s analytic plugin , otherwise you need to add it in child theme, to do so please set up a child theme add the following code in child theme’s functions.php file :

function third_party_tracking_code() { ?>

  <script>
    // Third party tracking code.
  </script>

<?php }

add_action( 'wp_head', 'third_party_tracking_code' );

Hope it helps.

[seowebmastersnycParticipant]

how can get the same effect for the header shrinking and logo see website below

http://pianopiano.com/

[ChristopherModerator]

Thanks for writing in! 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.

[ShortaxeParticipant]

I really enjoyed this thread, it has helped me a great deal.
Here is my site: http://jacoblindseo.com/

However can you tell me how I make the shrinking and enlarging more smooth as it is on this site: http://kottongrammer.com/

Also can you maybe give me the CSS code for changing “Navbar Top Logo Alignment” so that I can make the bar smaller without the logo dropping down underneath.

Thanks a lot!

[ShortaxeParticipant]

Oh and one more thing. This effect seems to course some issues for mobile devices. When I scroll up and down on my phone my site now jerks as if the navbar is resizing even though I am further down the page.

Is it possible to turn this effect off on mobile devices?

[JoaoModerator]

Hi There,

Please try using this code instead:

Add this to your Custom / 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: 120px;
margin-top: 4px;
}

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

Add this to your Custom / 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);
      }
    });
  }
});

To make it look good you will need to tweak the values of the code so it adpts perfectly to the website. When the code mentions x-brand it is related to the logo, if not to the navbar.

Notice that right now on your website the navabar is still small in relation to the logo when you scroll down and the logo, you can see the logo is passing the navbar.

On the codes above provide, change the px values to adjust size. And you can adjust the smoothness by playing with “0.5s ease;” values.

Hope that helps,

Joao

[ShortaxeParticipant]

Hi Joao, thanks for your help I appreciate it!

I’ve tried playing around with the values, but none of them will make the logo or the navbar go any slower..

Now I can pull the logo closer to the top, thanks, but I still cannot pull the navbar with it up. So there i more room left underneath the logo than above it.

My site: http://jacoblindseo.com

[JoaoModerator]

Hi There,

Your logo is looking a bit “pixalated” because the image size(width x height) is way too big.

Please upload a a smaller image.

Look the size of your logo image and compare to the size that is necessary to the navbar.

http://jacoblindseo.com/wp-content/uploads/2016/05/JacobLind_sd3final.jpg

Once you upload a smaller image you will get better results.

Hope that helps,

Joao

[ShortaxeParticipant]

I changed it, but it made no difference.

[Author]

Posts