Docs

[logoglo]

Hi there, i have a mixture of pages and custom links setup in my menu.

http://486.408.myftpupload.com/consulting-services/

If you go to that, the menu doesn’t stay in its “hover” state…nor does the home page.

I have this code:

// Conditions
// 1. Menu should be using full url, eg. http://site.com/#x-content-band-1 and not just #x-content-band-1
// 2. Use just one menu for both Primary and One Page.

jQuery(function($){

var window_base = window.location.href.split(“#”).slice(0)[0];
var window_hash = window.location.hash == ” ? ‘body’ : ‘#’+window.location.href.split(“#”).slice(-1)[0];
var outbound = /^https?:///i;

$(‘.x-one-page-navigation-active .x-nav-wrap.desktop .x-nav a’).each(function(){ //Scan links and convert them to relative hash for one page navigation’s Active statuses to work properly when manually scrolling

var hash = /#/.test( $(this).attr(‘href’) ) ? ‘#’ + $(this).attr(‘href’).split(“#”).slice(-1)[0] : ”;
var anchor_base = /#/.test( $(this).attr(‘href’) ) ? $(this).attr(‘href’).split(“#”).slice(0)[0] : $(this).attr(‘href’);

if(hash) { //Does it have hash? then perform check
if(anchor_base == window_base) { //If same page, then no need to reload, just make it relative
$(this).attr(‘href’, hash);
} // Else, leave it that way. So when user clicked, it will just link them to outbound page
}

}).click(function(e){ //Enable Parent and Submenu scrolling

var hash = /#/.test( $(this).attr(‘href’) ) ? ‘#’ + $(this).attr(‘href’).split(“#”).slice(-1)[0] : ‘body’;

if(hash && !outbound.test( $(this).attr(‘href’) ) ) { //Does it have relative hash?

e.preventDefault(); //Disable jumping
e.stopPropagation();

$(‘html,body’).stop().animate({ scrollTop: $( hash ).offset().top – $(‘.x-navbar’).height()},700 ,’swing’);

//Now add active status for automatic scrolling
$(‘.x-one-page-navigation-active .x-nav-wrap.desktop .x-nav li’).removeClass(‘current-menu-item’);
$(this).parent().addClass(‘current-menu-item’);

}

});

//$(‘html,body’).css({ scrollTop : 0});
setTimeout( function(){
$(document).ready(function(){ // Enable auto scroll when loaded.
$(‘.x-one-page-navigation-active .x-nav-wrap.desktop .x-nav li’).removeClass(‘current-menu-item’);
//$(‘a:not([href*=”#”])’).parent().addClass(‘current-menu-item’); For experiment only

if(window_hash) {
$(‘a[href$=”‘+window_hash+'”]’).click(); //Click it, so it will use default click from one page navigation event and submenu event
}
}); }, 300);

});

[Lely]

Hi There,

Please try adding the following CSS via Appearance > Customize > Custom > CSS:

.x-navbar .desktop .x-nav > .current_page_item > a {
    color: #16d157;
    box-shadow: 0 2px 0 0 #16d157;
}

Hope this helps.

[logoglo]

unfortunately, no, as you can see, its now highlighting all the menu items on that page….ie, the home page has the contact area, so its highlighted home and contact…

Remember I have one page scroller, and separate pages, hence I have the above java code…

It should work like my other page, which has the same code:

http://www.logoglo.com/

[Jack]

Hi there logoglo,

Thanks for writing back, this should be working just with the code you originally posted.

Would you mind sharing wp-admin details and ftp in a private reply please so we can take a closer look at this for you. 🙂

Thank you!

[logoglo]

This reply has been marked as private.

[Lely]

Hi There,

Thank you for the credentials.
Please create another menu on Appearance > Menu. On this menu please use relative URL for contact like #contact and absolute URL for external page. On homepage > page settings > select this menu under One Page Navigation. So you will have two menus – one is using relative URL and the other is set as primary and using absolute URL like http://486.408.myftpupload.com/consulting-services/.

Hope this helps.

[logoglo]

I cant see how this helps? now Im going to have 2 menus? but it will only show one menu, so items in the other menu wont show….

This work on my other sites, why not on this one? I use the same method, and code.

[logoglo]

You guys should think about working this in, as LOTS of websites have a main scroller page, with menu items linking to it, then separate pages…

[logoglo]

I have taken out the css you gave me, and now it is stuck on hover for HOME AND CONTACT

[logoglo]

.

[logoglo]

I re pasted the code form above and removed your css, back to square one now. Please check the java code, your css code does not work as it stays in the hover state, maybe a different java code will work? I dunno, I have tried everything, made a new menu from scratch, checked older versions of the java code, nothing works, im at a loss, because on the other sites it works perfectly.

[Paul R]

Hi,

I was able to fix it by removing the js code and creating two menus as instructed above.

Kindly check on your end.

Thanks

[logoglo]

That works perfectly! thanks, you are a genius! so in which menu do I add future pages to? both?

[Rue Nel]

Great! it’s good to know that this works for you.
Yes you may add the pages to both of the menus.
If you need anything else we can help you with, don’t hesitate to open another thread.

Regards.

[logoglo]

sorry to be a pain, can you check something out for me…if you are on the home page:

http://486.408.myftpupload.com/ and you click on the contact in the menu, it scrolls down fine, but if you go to any other page, and click contact from there, it scrolls to the middle of the contact page, how would I fix this?

Thanks.

[Author]

Posts