[KingOfTasParticipant]

Hi guys

This post contains:

• A rant
• An issue I’d like to resolve
• A suggestion to improve Customiser for Mobile sites with One Page Navigation and/or fixed navbars

I have the OPN on my site, works like a charm on Desktop, but could be a lot better executed for mobile. (the number of threads here on this subject is astonishing) Just add a toggle “Glue Menu to top on Mobile?”.

Now because a static menu is not out of the box in X, you get all these half ass solutions here. I tried all of them, none of them work. I have no other plugins, I have no jQuery errors in my console, I even tried to change my anchor links from relative (#about) to absolute (http://domain.com/#about). The latter makes all my links light up as if they were all hovered over permanently.

I tried

jQuery(document).ready(function($) {
  $('.x-navbar .x-navbar-inner .x-nav-collapse .x-nav a').click(function(){
  $('.x-btn-navbar').click(); 
  });
});

and

jQuery(document).ready(function($) {
  $('.x-navbar .x-navbar-inner .x-nav-collapse .x-nav a').click(function(){
    $('.x-nav-collapse.in.collapse').removeClass('in').css();
  });
});

and

jQuery(function($){ $('#menu-main-menu a').click(function(){  $('.x-btn-navbar').click(); }); });

and many more. Over a dozen threads. With very little people say “thanks, that solved it”.

Please, themeco, come up with a fixed navbar with the following options:

1. Under Customiser Header: Navbar Position
   Static Top
   Fixed Top
   Fixed Left
   Fixed Right

   Mobile Navbar position:
   Inline flow
   Glued to top (fixed and static are way to confusing for most people)

2. Collapse one page menu relative anchor upon tap? [YES|NO]
3. Default submenu state [Expanded|Collapsed]

And no, I cannot give you my login for my site. It’s local. Please come up with a flipping solution, I’m clearly not the only one, and you haven’t really resolved it for many people. Your support is great but, the forum is chaotic and I fear you don’t see this repetitive issues accruing.

Thank you for listening.

Referenced threads:

• https://community.theme.co/forums/topic/mobile-menu-with-one-page-navigation-not-working/
• https://community.theme.co/forums/topic/mobile-navigation-persistence/
• https://community.theme.co/forums/topic/one-page-working-well-on-desktop-but-not-on-mobile/
• More here: https://www.google.com.au/webhp?q=x+theme+one+page+navigation+mobile+stays+open

[ThaiModerator]

Hi There,

Thanks for writing in!

Try adding following code under Appearance > Customize > Custom > Javascript:

(function($){
  $('.x-navbar .x-nav-wrap.mobile a').on('touchend click', function(){
    $('.x-nav-wrap.mobile').toggleClass('in').css('height', 0);
    $('.x-btn-navbar').toggleClass('collapsed');
  });
})(jQuery);

Hope it helps.

[KingOfTasParticipant]

Amazing. Very grateful. Worked straight away.

I do hope you make these customise JS things for mobile redundant in a future version.

[ThaiModerator]

You’re most welcome and thanks for your feedback 🙂

[FrostingParticipant]

Hi,
I have a mixed one page menu with both #-links and ordinary page links. The script works well on the one page #-links but not on the ordinary links of type http://website.com/news. Any workaround for this?

[FriechModerator]

Hi There,

Thanks for writing in! But, at this time we kindly ask that you open them up in a separate thread. The longer threads get in the forum, they become more difficult to support as they tend to drift off topic and they also make it troublesome for users trying to search for solutions. Keeping threads relevant to their original inquiry ensures that we can keep better track of what has been resolved and that users can more effectively find answers to similar issues they might be experiencing.

Thanks!

[allankayakParticipant]

Just added the Code to my site and it works, but it means sub menus are not accessible

http://www.vossactive.no

I have a mix of menus used, and on some pages they use a onepage menu, but have a few sub menu items, to save space on the top nav bar.

Like on this page:

http://www.vossactive.no/en/high-ropes-course/

Is it possible to code it so that sub menus can still drop down? and maybe a slight delay before the menu zips away?

Thanks

[Paul RModerator]

Hi Allan,

Regretfully, at this time I am not entirely certain what it is you would like to accomplish based on the information given in your post. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (a link to a similar example site would be very helpful, or perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

[allankayakParticipant]

Very simple really – If i fix the postion of the mobile menu at the top of the screen, if you have lots of items in ‘dropdown’ then open and run off below the mobile screen and there is no way to reach them.

But, not having a mobild menu is not the best user experience when it comes to long onepage type pages, as the menu you use to navigate the page is all the way off the screen

Just look at my site – right now the mobile menu is not fixed, so if you open an activity from the activity meny you cannot really use the onepage feature to full effect, – but if I fix the menu, you cannot use most of the menu items

http://www.vossactive.no/en/

[JoaoModerator]

Hi there,

I checked your site on my android phone and it is looking good.

The only thing I can notice on desktop and mobile and it seems to be working perfectly.

Can you try to explain again on exactly point you are facing any issues?

Thanks

[Author]

Posts