Mobile One Page Navigation & collapsing

Support
#1

Hello again guys,

created a one-page navigation which now works well on desktop.

Created a mobile-only view with the same ids, but nothing happens when clicking on the concerning menu-items.
Clicking on the menu-items which point to the combined mobile/desktop view (last two items) works.
Additionally the menu doesn’t collapse on click/touch.

#2

Hi Hei,

I’m sorry but I’m not sure what you mean by:

X mobile menu items does not really have the functionality to collapse the dropdown because it does not have the option to be sticky in mobile.

Custom JS is needed for that. I’ll post the custom JS here but please note that this is outside the scope of our support and this will only serve as a guide.

Add this code in Theme Options > JS.

jQuery( function($) {
	$('#x-nav-wrap-mobile a').on('click touchend', function () {
		$('#x-btn-navbar').trigger('click');
	});
});

Thanks.

#3

Thanks for your reply. The domain from the video is not the domain in concern. You mind removing it for privacy reasons please.
Regardless, the mobile-collapse works with your snippet, thanks for that, seems like it’s been put in there already ;). If you allow me that question, what use-case requires the mobile menu NOT to collapse please, should be the default imo. As it sits once it’s opened it only can get closed finding the button again, rather unpractical sticky or not.

Please check the domain attached, I’ve created rows only visible on desktop and rows only visible on mobile.
Using the singlepage-navigation works on desktop but not on mobile where the concerning rows contain the same ids as anchors. url/#anchor works on desktop but not on mobile though the anchors are there (in a different row). Clear?

#4

I’ve removed the screencast now.

The issue you’re facing is because you have assigned the ID twice. I see one assigned to a section and the other is assigned to a row. I’d recommend you assign to a section then use rows for different screen size displays.

Thanks.

#5

The problem with your solution is that I’ve assigned background-images to sections (as from your demos) which are supposed to show up only on on desktop. As far as I can see I cant assign background images to rows so this doesnt work here as I couldnt hide the images on mobile.
As for your answer, yes I’ve assigned ids twice but looking at the code only one of them is present at time, so it should actually work, at least in regular html, yet it doesnt. Any other recommendations ? (besides making two menues, and use different ids for mobile i guess…)

#6

I believe you’re referring to the Integrity demo? It’s not a one page navigation setup so it does not apply for your setup.

Advanced Background option is available for rows so you can add a background image to your row.

Not sure why you only see one. There are 2 ids added in the page.

I’m sorry but I do not have other recommendations and the setup I described is the correct method.

I also missed to answer your previous question.

X does not have a sticky mobile nav option so the menu should not collapse because the intended behavior is you use the Scroll to top button to go back to the opened menu. If it collapses, you will need to open the menu back again which is not ideal.

Thanks.

#7

Thanks for the quick reply:

Cant see em ?

X does not have a sticky mobile nav option so the menu should not collapse because the intended behavior is you use the Scroll to top button to go back to the opened menu. If it collapses, you will need to open the menu back again which is not ideal.

Interesting, I’ve never seen that behaviour anywhere to be honest, scrolling back to the opened menu which takes up the space of the whole screen.

Is it actually possible to assign a different menu as mobile menu ?

#8

Please change your setup to V2 Section so you can use the V2 Row which has the background option.

Takes up the whole screen? I believe you’re describing a sticky menu? If the navbar isn’t sticky, it will not take the whole screen. Opening the Mobile Navbar out of the box pushes the content down and you need to scroll down and then the scroll to top button will show up and you click or tap it to go back to the top of the page where the mobile menu is still open.

No. If you need this option. I’d recommend you upgrade to Pro.

Thanks.

#9

Thanks again.

I’d recommend you assign to a section then use rows for different screen size displays.

So at last on V2 sections, where do I enter the id as suggested ?

#10

Hi Hei,

Inspect the Section and under its customize tab, you’ll see the ID field.



Hope it helps,
Cheers!

#11

Thanks, that works.
The problem now is that the menu height isn’t taken into consideration navigating to mobile anchors. The headlines are now hidden under the menu when navigating to the sections. How can I adjust that please, besides adding ugly margins or similar ? (btw speaking js and php you can also point me to the concerning file if that’s ‘out of your scope’, though searching through the forums, this seems to be a common problem. SP-navigation on desktop simply needs to work on mobile as well without customization imo.)

#12

I’m sorry but X’s JS are optimized so they are not readable. You will need to create your own JS to mimic the sticky spacer which is available only in desktop screens.

This concern is mainly because X is being hacked to perform what it’s not designed for.

In the past, we received numerous feature request for header customizations or flexibility and a sticky mobile bar is one of them. The response to that request is Pro.

The spacer that I mentioned is available in Pro out of the box or is the normal behavior when you enable the Sticky option of the Bar in all screen widths. Tapping on the mobile nav also auto-collapses without needing custom code.

Thank you for understanding.

#13

Ok, thanks for the quick replies all day, appreciated.

That is disappointing to hear tbh, as I’m not keen on extra features or out of the box customisations as the ‘Pro’ suggests, I only want the included features to work cross-device wide. Never ever would I’ve checked your versions for the feature we talk about, it’s mandatory in any version to work imo, so this might leave more customers disappointed and move em away from your theme rather than to your pro theme, really unnecessary and time-consuming especially as the theme is good up to that point.

#14

Thank you for your feedback. I’ll post this as feature request so it might be taken into consideration in the future.

1 Like
#15

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.