Docs

[Paul R]

Hi,

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

@media only screen and (min-width: 980px) {
body .x-navbar,
body .x-navbar-solid {
     transition: all 0.8s ease-in-out;
}
}

2. You can add this under Custom > Edit Global Javascript in the Customizer.

jQuery(document).ready(function($) {
$('a[href*="#"]').off('touchstart click');
  var $body                = $('body');
  var bodyHeight           = $body.outerHeight();
  var adminbarHeight       = $('#wpadminbar').outerHeight();
  var navbarFixedTopHeight = 50;
  var locHref              = location.href;
  var locHashIndex         = locHref.indexOf('#');
  var locHash              = locHref.substr(locHashIndex);

  //
  // Calculate the offset height for various elements and remove it from
  // the element's top offset so that fixed elements don't cover it up.
  //

  function animateOffset( element, ms, easing ) {
    $('html, body').animate({
      scrollTop: $(element).offset().top - adminbarHeight - navbarFixedTopHeight + 1
    }, ms, easing);
  }

  //
  // Page load offset (if necessary).
  //

  $(window).load(function() {
    if ( locHashIndex !== -1 && $(locHash).length ) {
      animateOffset(locHash, 1, 'linear');
    }
  });

  //
  // Scroll trigger.
  //

  $('a[href*="#"]').on('touchstart click', function(e) {
    href        = $(this).attr('href');
    notComments = href.indexOf('#comments') === -1;
    if ( href !== '#' && notComments ) {
      var theId = href.split('#').pop();
      var $el   = $('#' + theId);
      if ( $el.length > 0 ) {
        e.preventDefault();
        animateOffset($el, 850, 'easeInOutExpo');
      }
    }
  });

  //
  // Initialize scrollspy.
  //

  if ( $body.hasClass('x-one-page-navigation-active') ) {

    $body.scrollspy({
      target : '.x-nav-wrap.desktop',
      offset : adminbarHeight + navbarFixedTopHeight
    });

    //
    // Refresh scrollspy as needed.
    //

    $(window).resize(function() {
      $body.scrollspy('refresh');
    });

    var timesRun = 0;
    var interval = setInterval(function() {
      timesRun += 1;
      var newBodyHeight = $body.outerHeight();
      if ( newBodyHeight !== bodyHeight ) {
        $body.scrollspy('refresh');
      }
      if ( timesRun === 10 ) {
        clearInterval(interval);
      }
    }, 500);

  }

});

Hope that helps.

[broavise]

That worked. Thanks for the help

One more question. Is there a way to disable the effects on a different page?

BLOG

[Christopher]

Hi there,

Yes, please move JS code from cornerstone -> custom JS to customize -> Custom -> custom JS.

Thanks.

[broavise]

Thanks for the reply.

The code is already in customize -> Custom -> custom JS.

[Christopher]

Hi there,

Please update your code to :

jQuery(document).ready(function($) {
$('body:not(.blog) a[href*="#"]').off('touchstart click');
  var $body                = $('body');
  var bodyHeight           = $body.outerHeight();
  var adminbarHeight       = $('#wpadminbar').outerHeight();
  var navbarFixedTopHeight = 50;
  var locHref              = location.href;
  var locHashIndex         = locHref.indexOf('#');
  var locHash              = locHref.substr(locHashIndex);

  //
  // Calculate the offset height for various elements and remove it from
  // the element's top offset so that fixed elements don't cover it up.
  //

  function animateOffset( element, ms, easing ) {
    $('html, body').animate({
      scrollTop: $(element).offset().top - adminbarHeight - navbarFixedTopHeight + 1
    }, ms, easing);
  }

  //
  // Page load offset (if necessary).
  //

  $(window).load(function() {
    if ( locHashIndex !== -1 && $(locHash).length ) {
      animateOffset(locHash, 1, 'linear');
    }
  });

  //
  // Scroll trigger.
  //

  $('body:not(.blog) a[href*="#"]').on('touchstart click', function(e) {
    href        = $(this).attr('href');
    notComments = href.indexOf('#comments') === -1;
    if ( href !== '#' && notComments ) {
      var theId = href.split('#').pop();
      var $el   = $('#' + theId);
      if ( $el.length > 0 ) {
        e.preventDefault();
        animateOffset($el, 850, 'easeInOutExpo');
      }
    }
  });

  //
  // Initialize scrollspy.
  //

  if ( $body.hasClass('x-one-page-navigation-active') ) {

    $body.scrollspy({
      target : '.x-nav-wrap.desktop',
      offset : adminbarHeight + navbarFixedTopHeight
    });

    //
    // Refresh scrollspy as needed.
    //

    $(window).resize(function() {
      $body.scrollspy('refresh');
    });

    var timesRun = 0;
    var interval = setInterval(function() {
      timesRun += 1;
      var newBodyHeight = $body.outerHeight();
      if ( newBodyHeight !== bodyHeight ) {
        $body.scrollspy('refresh');
      }
      if ( timesRun === 10 ) {
        clearInterval(interval);
      }
    }, 500);

  }

});

Hope it helps.

[broavise]

Thanks for the reply.

I added the code, but it doesn’t seem to do anything. I also tried replacing the old code, but it seems to break the menu effect

[Paul R]

Hi,

I went ahead and disable it on your blog page.

Please check.

Thanks

[broavise]

Thanks for the reply

Doesnt seem to be disabled. The menu is still transparent and and when you scroll down, the menu disappears. I would like the menu to be the height and the color it changes too when you scroll on the main page

I hope that makes sense

Thanks

[Christopher]

Hi there,

Thanks for clarifying.
Please confirm that home page menu should be transparent and changes color on scroll. Other pages should have solid fixed menu, am I right?

Find and remove this code :

.blog .x-navbar.x-navbar-fixed-top {
    position: static;
}

Update this code :

@media only screen and (min-width: 980px){
body .x-navbar {
    background-color: transparent;
    padding-top: 20px;
    padding-bottom: 20px;
    transition: background-color 0.8s ease-out;
}
}

To :

@media only screen and (min-width: 980px){
body.home .x-navbar {
    background-color: transparent;
    padding-top: 20px;
    padding-bottom: 20px;
    transition: background-color 0.8s ease-out;
}
}

Hope it helps.

[broavise]

You are correct. That is what I am looking for.

I can’t find this section of code:

@media only screen and (min-width: 980px){
body .x-navbar {
    background-color: transparent;
    padding-top: 20px;
    padding-bottom: 20px;
    transition: background-color 0.8s ease-out;
}
}

I have these that start with the same line:

@media only screen and (min-width: 980px) {
body .x-navbar-wrap {
     height:auto;
}

@media only screen and (min-width: 980px) {
body .x-navbar,
body .x-navbar-solid {
     transition: all 0.5s ease-in-out;
}
}

@media only screen and (min-width: 980px) {
.blog .x-navbar,
.blog .x-navbar-solid {
     transition: none;
}
}

[broavise]

Actually, The menu effects would be ok on the blog page, if I could figure out how to remove the slider at the top of the page, and replace it with an image that is full width and stays there when you click on a blog post

[Lely]

Hi There,

When I check this:http://www.benavise.com/blog/ it is not a blog archive page anymore but rather normal page. There’s no content and no slider. Then on your blog post like:http://www.benavise.com/life_insurance/hello-world/ you do have an fullwidth image already. Can you clarify what you want to achieve?

[Author]

Posts