Docs

[nickohorny]

Hi, I have a one page menu in place on the site, and a store / blog separate. (ORDER / NEWS)

The menu links should all be static white, with a dark pink hover state.

The one page links in my menu are all showing dark pink while the separate pages in the menu of (ORDER / NEWS) are working correctly with white/dark pink hover.

How can I make sure all my one page menu links work correctly please? no idea why they are not showing white like the rest. Thanks

[nickohorny]

This reply has been marked as private.

[Joao]

Hi There,

Please do the following.

On Wp Dashboard > Appereance > Menu

On your Custom Links URLs remove / before the sections ids. So the link will be #x-section1 instead of /#x-section1 . Please see img1.

On your home page click on Edit Page on your Top Admin Wp Bar and scroll down until you find the option for One Page Navigation Menu and address to your menu – main, at the moment it is deactivated. .
Please see img2.

Hope that helps

Joao

[nickohorny]

Thanks, that has fixed it. However, now there is an issue that if you are on a page such as ‘ORDER’ or ‘NEWS’ that is not involved in the one page setup, it does not navigate at all? It does nothing, so how does one get back to the one page sections from these pages?

Thanks for the help.

[Rad]

Hi there,

You should have two set of menus for that.

One menu that has relative URL and this is the one that you’ll set as your one page. And another menu that has absolute URL which you should set as primary menu.

This is relative, #x-section-1 and this is absolute http://businesscardbangkok.com/#x-section-1

Hope this helps.

[nickohorny]

Thanks, think I get you

I have set one page menu up with relative URL’s for the home page only… eg/ “x-section-1”
For the other pages they are now using a separate primary menu using absolute URLS’s.. eg/ http://businesscardbangkok.com/#x-section-1 – Which will take the user back to the one page setup.

It doesn’t seem to work well, for a start my ‘x-section-2’ is not being recognised by either menu, unsure why?

And if you click to go back to the one page menu it doesn’t land exactly the right place? it seems to show the previous section too.

Thanks.

[nickohorny]

Nevermind my previous post, fixed part of it.

I just have one question – if navigating from say ‘news‘ to ‘card design‘ when it goes back to the card design section, you will notice it doesn’t quite match up with the top of that row within that one page navigation page, why is that? it seems to work on ‘prices’ for example, just notice card design and contact are not lining up.

Thanks.

[Lely]

Hi There,

Please try adding the following code in Appearance > Customize > Custom > Edit Global Javascript:

jQuery(document).ready(function($) {
$('a[href*="#"]').off('touchstart click');
  var $body                = $('body');
  var bodyHeight           = $body.outerHeight();
  var adminbarHeight       = $('#wpadminbar').outerHeight();
  var navbarFixedTopHeight = $('.x-navbar-fixed-top-active .x-navbar').outerHeight() - 48;
  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 this helps.

[Author]

Posts