[BradleyCarlyleParticipant]

Hi I have been researching throughout the forum to find a solution to this but all the javascript coding has been setup per the person asking for help with their website.

My url is http://www.bradleycarlyle.com (it is not currently live) I am running WordPress 4.6.1 X Version 4.6.4 and Cornerstone 1.3.3

The javascript I used does work but it causes the page to load at the top and then scroll down to the desired x-section causing my site to not look smooth but just jumpy and weird.

I have 2 pages, the home page and portfolio page, the contact “page” is just a x-section on my one page navigation on my homepage.

The homepage is setup as one-page navigation and the portfolio page is another separate page. I have a link to the contact form on my nav-bar that I would like to link back to the home page with the one page navigation. The contact navigation item is using the full-url that was required from the javascript coding.

Here is the code that was posted on the forum that I used —

// 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-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-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-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);

});

One last question I had was I have a rev slider above the masthead and when I click the home navigation it goes back to the top of the page but I see part of the slider which I would like to fix but I don’t know if it has do with margins and padding in the css.

Also if you have any tips on making the slider load faster, that would be greatly appreciated, if that is out of your scope as support, I understand.

Thank you for your help in advance!

[BradleyCarlyleParticipant]

This reply has been marked as private.

[JadeModerator]

Hi Bradley,

Instead of using a Javascript code to make this setup work, you can try doing another workaround.

You can create another menu and add each menu item as Custom Links then add the absolute link in the URL field like http://bradleycarlyle.com/#x-section-1 for the home link and http://bradleycarlyle.com/#x-section-4 for the Contact Link then save the menu as the Primary Menu instead of the first menu you created for the homepage.

Please remove the JS code you have added as it might have caused the issue on the Rev Slider on the homepage.

You may check on this article about how to optimize the performance of your site: https://community.theme.co/kb/performance/

Hope this helps.

[BradleyCarlyleParticipant]

This reply has been marked as private.

[Rue NelModerator]

Hello There,

With one page navigation, you will need two sets of menu. One menu will be assign as your primary menu. This is where you menu items is linked to other pages and have a link like http://example.com/#x-section-4. The second menu on the other hand sall be used exclusively for one page navigation menu. You can have a link of the menu items as #x-section-4 or #my-portfolio-section.

For reference, please check out this topics: https://community.theme.co/forums/topic/one-page-navigation-and-link-pages-back-to-index/#post-76143

Hope this helps.

[Author]

Posts