One Page not working as should

[anton123]

Hi there,

Normally themes that offer a one page navigation system (via the main top menu) works like this and these are the problems I’m having with Dante’s:

1) You can’t use the main navigation on other pages (like shop items / posts or portfolio items) since the main menu’s page anchor link (spacer id) doesn’t link back to the main “One Page” – so this is not workable as you need to use other pages outside of the One Page and cannot link back to it

2) If you use normal full anchor links in the menu line example http://www.hompage.com/#services, then you loose the smooth scrolling effect plus even this does not work correctly as it doesn’t go to the correct position on the page (the start of the section is hidden under the sticky header)

And yes, I’ve tried adding the extra CSS class “smooth-scroll-link” in the menu link item and this does not do anything.

3) Active menu item highlighting: in no 1. above this does not highlight the active menu item but keeps “home” highlighted at all times. In no. 2 above highlights all the menu items as active (since they all have the same root domain link)

So how do I get no.2 to work with a smooth scrolling effect and that it links to the correct position on the page for the section plus the menu only highlights that section?

Help appreciated thanks

BTW I have searched the forums extensively for answers and yes. I have read: http://support.swiftideas.net/knowledgebase/how-to-create-a-one-page-site-using-the-one-page-navigation/

[anton123]

This reply has been marked as private.

[Swift Ideas – Ed]

Hi @anton123,

Currently that is how it works – but we are looking to improve it. The current setup isn’t really designed for a one page nav with sub-pages, due to only being able to have a single menu across the site. This is why we introduced the side one page nav.

The issue with the # link not scrolling to the section when used in a full URL, is that this is standard browser functionality – not something that can be overridden.

We’ll see what we can do for an update in the near future, hopefully add in a menu override option, and the highlighting to counter these issues.

– Ed

[anton123]

Thanks Ed,

For the # link full URL – if I disable the sticky menu, you can see the start of the section [that might be an option although the user then has to scroll up to see the menu again)
What about the menu active state for the relevant section, plus getting smooth scroll to work – are these possible?

Thanks again

[Swift Ideas – Ed]

@anton123 – menu active state is something we’re working on adding. The issue with the full URL not smooth scrolling is the issue that the browser causes this – not something we can override.

We’ll look into a few possible methods.

– Ed

[anton123]

Thanks guys for updating this.

I’m testing this and want to use it, but the anchor links from other pages back to the ‘one page’ do not land on the right spot on the page (it is hidden by the sticky menu) plus the menu does not highlight the active state (main nav to show the current area)

How do I get the anchor links to display the relevant page section just below the sticky header and not hidden behind it with the relevant menu item highlighted?

I will send the links and examples

Thanks very much

[anton123]

This reply has been marked as private.

[anton123]

And also: For the one page navigation menu: how do you get ‘Home’ to go back to the very top of the page?
If you use the custom link: http://www.domain.com/#top then the Home menu item stays highlighted at all times.

If you use just # or #top for the link URL then nothing happens when you click on it?

You can’t use a spacer id, because it doesn’t go to the very top of the page

Plus- when the page first loads, you want ‘home’ to be highlighted

Please advise thanks

[Mohammad – SUPPORT]

Hi,
I made some changes here http://taffydev.com.au/clients/oamm/retail/#shopping . Please check menus and sub menus and hope you will like this .If you like then i can make changes to your website too .

Thanks

[anton123]

Thanks, well that seems to work.
What changes to the code did you make? Please list the changes and lets see if we can sort this out

Thanks very much

[Mohammad – SUPPORT]

Hi,
Please first disable smooth scroll plugin after paste given below code at Admin -> Theme Options -> Custom JS.

<script>
jQuery( document ).ready(function() {
scrollid = window.location.hash;
if(scrollid){
spacerHeight = jQuery(scrollid).height(),
headerHeight = 0;
if (jQuery('.sticky-header').length > 0) {
headerHeight = jQuery('.sticky-header').height();
}
if (jQuery('#wpadminbar').length > 0) {headerHeight = headerHeight + 28;
}
                        
jQuery('html, body').stop().animate({
scrollTop: jQuery(scrollid).offset().top + spacerHeight - headerHeight - 30
                        }, 1000, 'easeInOutExpo');
 }
jQuery('ul#menu-one-page-1 li a').bind('click', function(e) {
var anchor = jQuery(this),
url = anchor.attr('href');
 scrollid =    url.substring(url.indexOf('#'));
spacerHeight = jQuery(scrollid).height(),
headerHeight = 0;
if (jQuery('.sticky-header').length > 0) {
headerHeight = jQuery('.sticky-header').height();
}
if (jQuery('#wpadminbar').length > 0) {headerHeight = headerHeight + 28;
}
                        
jQuery('html, body').stop().animate({
scrollTop: jQuery(scrollid).offset().top + spacerHeight - headerHeight - 30
                        }, 1000, 'easeInOutExpo');
                        
    e.preventDefault();
});
});
</script>

Thanks 🙂
With Best Regards
Swift Ideas

[anton123]

Thanks Mohammad,
The difference I see is that now: the menu does highlight the active state from outside anchor links (main nav to show the current area) and the landing position is no longer hidden behind the sticky menu. But the position is still not exactly right, it is now about 200px below where it should display?

So here is a list of outstanding issues to get the One Page navigation to work properly:

– the anchor links from other pages back to the ‘one page’ do not land on the right spot on the page (it is now about 200px below)
– For the one page navigation menu: how do you get ‘Home’ to jump to the very top of the page (without reloading the page again)?
– when the page first loads, you want ‘home’ to be highlighted in the menu

Thanks very much for your help with this

[Mohammad – SUPPORT]

Hi,
Please stop editing at your side so i can make these fix.
Thanks

[anton123]

Thanks – I’m only working in the Rev slider.

Does that affect things?

[anton123]

This reply has been marked as private.