Hello, I am attempting to create a one-page scrolling website with navigation that links down to different sections on the page using the # method.
This works great, but I've run into a problem. This site is not only limited to the one-pager, and features a few other independent page breakouts apart from the main page.
So when you use one of these links, the navigation will no longer take you where you need to go. In the URL area, in addition to the #, I put the whole URL, but when this link is clicked when in a separate page, it scrubbed the #, and just brings you back to the home page.
This prevents you from getting "stuck" on the separate page (a problem I had been having), but still requires the user to click again on the section they want. It would be ideal if it could load the desired section position, without requiring the additional click.
I hope this is making sense. Any help is appreciated.
Scroll down to the "Dispatch" blog area, and click on any one of the blog posts in the masonry list. This will bring you to the separate blog page. Then try to click any one of the links in the navigation area - this will bring you back to the homepage but will remove the section that you clicked on, instead simply bringing you to the top.
It's confusing, because if you include the # link and hit the URL in the browser, it'll take you straight to the section you wanted i.e: http://outpostresidency.com/#about
Hello, I am attempting to create a one-page scrolling website with navigation that links down to different sections on the page using the # method.
This works great, but I've run into a problem. This site is not only limited to the one-pager, and features a few other independent page breakouts apart from the main page.
So when you use one of these links, the navigation will no longer take you where you need to go. In the URL area, in addition to the #, I put the whole URL, but when this link is clicked when in a separate page, it scrubbed the #, and just brings you back to the home page.
This prevents you from getting "stuck" on the separate page (a problem I had been having), but still requires the user to click again on the section they want. It would be ideal if it could load the desired section position, without requiring the additional click.
I hope this is making sense. Any help is appreciated.
Hey,
Could you kindly link me to a URL showing the problem in regards?
Cheers
http://www.outpostresidency.com/
Scroll down to the "Dispatch" blog area, and click on any one of the blog posts in the masonry list. This will bring you to the separate blog page. Then try to click any one of the links in the navigation area - this will bring you back to the homepage but will remove the section that you clicked on, instead simply bringing you to the top.
It's confusing, because if you include the # link and hit the URL in the browser, it'll take you straight to the section you wanted i.e: http://outpostresidency.com/#about
Hey!
You can edit the init.js file on your server, kindly open that and change this:
$("#header-outer a[href*='" + location.pathname + "']").each(function(){ var $href = $(this).attr('href'); if($href.indexOf("#") != -1) { $(this).attr('href',$href.substr($href.indexOf("#"))); $(this).parent().removeClass('current_page_item').removeClass('current-menu-item'); } });to this:
if(location.pathname.length > 1) { $("#header-outer a[href*='" + location.pathname + "']").each(function(){ var $href = $(this).attr('href'); if($href.indexOf("#") != -1) { $(this).attr('href',$href.substr($href.indexOf("#"))); $(this).parent().removeClass('current_page_item').removeClass('current-menu-item'); } }); }Let us know if it fixes it for you.
Thanks
ThemeNectar Support Team