Docs

[RLav]

Hi support,

I’m buiding a onepage site with X and I ran into a couple of problems combining onepage and external links in the menu’s. Before there also was a problem with the scrolling, but that seems to be fixed by a custom script (see: https://community.theme.co/forums/topic/problems-with-one-page-navigation/). I have two different menu’s set up, one for the homepage (onepage scroll) and the second menu for 2 external ‘non-one-page’ pages.

The menu for the homepage has 4 main items: home, wat, wie and waar (home, what, who and where) and two submenu-items under wat: missie and wiel van perspectief. The main items link to the section id’s, #wat etc. and the 2 sub-menu-items link to pages ( http://partnersinperspectief.nl/missie ). The menu for the 2 ‘non-one-page’ pages (set as primary menu) has links like http://partnersinperspectief.nl/#waar etc.

My first problem is that on the 2 ‘non-one-page’ pages all the links work exept ‘wat’ (has 2 sub-menu-items).
The second is that the links that do work don’t scroll to the right place (on mobile), it shows part of the section above.
The third is that the toggle for the submenu on mobile doen’t work anymore, it makes the page jumps to the section of the main-menu link.
The fourth is that when you refresh the page, the header disappears on desktop and scrolls to the wrong place on mobile.

This site is not yet live, so it’s password protected via htaccess. I’ll send all the login data in a pm and move the external script into X.

regards,

Richard

[RLav]

Sorry for the typo in the title, should be combining

[RLav]

This reply has been marked as private.

[Christian]

Hey Richard,

The One Page navigation feature was not designed and intended to be used as primary menu or site-wide menu. It is for landing page or one page navigation. It is also not recommended to put a sub-menu because it mobile, it won’t work.

Please create a menu to be used as your primary menu.

Thanks.

[RLav]

Sorry, but this answer is far from satisfying!

1. you tell me: “The One Page navigation feature was not designed and intended to be used as primary menu or site-wide menu.”

In my question I clearly stated that I have 2 menu’s, one for the one-page-page and one for the non-one-page pages.

2. you said: “It is also not recommended to put a sub-menu because it mobile, it won’t work”.

I’ve read the instructions on https://community.theme.co/kb/how-to-setup-one-page-navigation/ as well as a ton of support question on one-page problems (there are a lot …). This page tells me that “Finally, you can still add normal links to your one page navigation if you’d like, as well as dropdowns”.

3. I also stated that the menu on non-one-page pages work except for the one that has a submenu ie “wat”.

The only drawback being that when you return to the one-page page, there’ll be a hash-tag after the url. For example partnersinperspectief/#waar. I’m have been searching for a javascript solution to modify the url in the address bar and found some ways that might do the trick after the page has loaded …

4. If I remove the submenu and just use one menu (set as primary) I still get funky behaviour when refreshing the page.

I had to use custom js to make the the one-page thing work in the first place (thanks for the help on that one!), so this feature that’s advertised by X clearly doesn’t work out of the box! I don’t mind a little tweaking to make things work, but now I’m in battle with build in scripts that are a little to complicated.

5. Did you even look at the site?

Hope someone can help me out!

regards,

Richard

[Rad]

Hi there,

Regardless, the one-page menu is meant for the single page only, there a lot of varying issues combining both standards. The funky behavior is only normal since it’s reloading the page compared to an already loaded page and just clicking it.

Don’t expect that it will just smoothly scroll when clicking the menu from internal page to home page. It still needs to load the page.

And to fix the issue about linking the #wat, please add this code to Admin > Appearance > Customizer > Custom > Javascript

jQuery( 'a[href="http://partnersinperspectief.nl/#wat"]').off('touchstart touchend').on('click', function(){ window.location = jQuery(this).attr('href'); } );

Then let’s tackle the issue one by one, it’s a big one in which we don’t usually support since it’s not meant to be setup like that. Though I could check them one by once, maybe something that can easily be fixed one at a time. What issue should we start with?

Thanks!

[RLav]

Cool, Rad to the rescue (again)!

Thanks for your reply, let me say that I’m very pleased with X most of the time. This is my fourth site using X theme. I have decided to build this site with X because the onepage feature is buikd in and, like I said before the documentation suggested that “Finally, you can still add normal links to your one page navigation if you’d like, as well as dropdowns”. But, this is the first time I used it to build a onepage site.

About the funky behaviour, I don’t expect the links to scroll smoothly to the sections after a page reload (that would be an ignorant thing to hope for!). But the thing is that it mostly works in a maximized browser, just landing on the right spot.

I’m in the Netherlands and it’s the middle of the night right now. I’ll try your first suggestion in the morning and let you know from there. I’m willing to invest some time in this problem, since you offered to take the time as well (much appreciaded). So no real hurry on my side, just want to tackle this thing with style 🙂

One thing that’s bothering me though is that when I refresh the page in classic onepage situations ie no outboundlinks involved, that the header disappears untill I use the scrollwheel on my mouse. It then reappears.

Anyway thanks for your kind offering to tackle this, one step at a time.

I’ll be in touch,

Richard

[Paul R]

Hi Richard,

To fix the header, you can add this under Custom > Edit Global CSS in the Customizer.

body .x-navbar {
    position:fixed;
    width:100%;
    top:0;
    z-index:9999;
}

Hope that helps.

[RLav]

@ Paul R.

Thanks for your suggestion!

I found out that the class ‘x-navbar-fixed-top’ is dynamically added to the navbar after scrolling down by a function in the file /framework/js/src/site/inc/x-head-navbar-fixed-top.js

It should be removed when $(this).scrollTop() >= navbarOffset(), but that never happens! Therefore when I refresh the page the class ‘x-navbar-fixed-top’ is not added again.

Your solution works, but it adds a noticable delay before showing the navbar. So I tried it with jquery ($(document).find(‘.x-navbar’).addClass(‘x-navbar-fixed-top’);), same result.

So for now I went with changing the file /framework/views/global/_navbar.php to add the class.

I’m aware of the fact that I need to watch out for changes in the theme after an update!

Richard

[RLav]

@ Rad,

your code makes the menu work on the pages ‘missie’ and ‘wiel …’! So let’s try to tackle the next thing.

When I tick on the menu-item ‘wat’ on the homepage on an Ipad (landscape), the page scrolls to the section and the submenu toggles. I tried to fix this by adding: $(‘a[href=”#wat”]’).off(‘touchstart touchend’); This fixes the scroll but before and after this fix the submenu doesn’t toggle back (close).

[Rad]

Hi there,

The submenu in iPad’s landscape is the same as the desktop menu. It toggles upon hover and out, but touch screens don’t have hover/out feature.

Which item should toggle the submenu? Is it the links within the sub menu? Or the exact a[href=”#wat”]? That’s because of you hide submenu upon clicking a[href=”#wat”], then submenu will not appear on the first place since it’s clicked.

Thanks!

[RLav]

Rad,

I understand that the menu and the submenu is the same as on desktop. While adding $(‘a[href=”#wat”]’).off(‘touchstart touchend’); helps because now touching the link on an ipad (landscape) for the first time does not scroll to the section ‘wat’ and touching it again does scroll to the section ‘wat’. This is good, but after that the submenu stays open.

I tried (see customizer code for context):

if ( $(this).attr(‘href’) == “#wat” && event.type == “click”) {
$(‘.sub-menu’).css({display: ‘none’});
$(‘a[href=”#wat”]’).on(‘touchstart mouseover’, function(){ $(‘.sub-menu’).css({display: ‘block’}); });
}

But it doesn’t work. How do I hide the submenu after touching it twice?

Richard

[RLav]

Rad,

I forgot to answer your question. I mean the menu item ‘wat’. Toching the submenu items will take you to another page, so there’s no need to toggle.

Richard

[RLav]

Hi,

I also tried:

$(‘a[href=”#wat”]’).off(‘touchstart touchend’).on(‘touchstart’, function(){
$(‘.x-navbar .desktop li.menu-item-has-children’).toggleClass( “x-active” );
});

within the onePageScrollFixer function and outside of it (see custom js in customizer), but that didn’t work either!

Hope you guys have a solution for this.

Richard

[Rad]

Hi there,

Please try this

$('a[href="#wat"]').off('touchstart touchend').on('click', function(){
			$(this).parent().toggleClass( "x-active" );
		} ); 

Thanks!

[Author]

Posts