Support » Theme: Chaplin » Mobile Menu doesn’t work for anchor links

  • Resolved Giorgio25b

    (@giorgio25b)


    I’m testing a scenario where there is only 1 single page and therefore the main and mobile menu are structured on a #anchor-links structure: #project, #about, #and-so-on
    I did try to use the shortcut url structure /#project and also the full domain path https://my-site.com/#project but there is nothing that is actually triggering the mobile menu to close and reach that url.

    Is there anyway to address this issue?

Viewing 7 replies - 1 through 7 (of 7 total)
  • Experiencing the same here. Any update on the issue?

    @gatorbri99 I got a suggestion from another user, here below, but I did not have time to explore it. Also it seems a little bit too much to fix an issue, seems more like a refactoring of the nav script.

    For single page navigation case, you may need to create additional scripts to highlight the active #project id section you just reached if you wanted to complete the single page navigation manner.

    Similar to scroll spy method, for best UX you may need to add smooth scrollto the particular section#id. This feature would complete all possibility especially if we wanted to showcase how Gutenberg block and section can achieve with this new default theme.

    Conceptually how it work;

    In mobile, click the mobile menu toggler,
    Mobile menu revealed
    Click on particular link (let say #portfolio)
    Menu add menu highlight active class to • Portfolio (may highlight parent/ancestor page)
    Mobile menu closed, Mobile menu toggler reversed to default state
    Screen will smooth scroll to selected section

    Though no signs from the developer yet on this issue

    Theme Author Anders Norén

    (@anlino)

    Hi @giorgio25b and @gatorbri99. Sorry for the radio silence on this. Adding better support for one page navigation is at the top of my list for Chaplin, but work on Twenty Twenty has taken up most of my time this fall. I’m hoping I’ll get to this pretty soon.

    Thanks @anlino I guess/hope that the patch could solve the issue on both themes, since also Twentytwenty has the same problem.
    I wish I could help more with the code, but that JS is above my pay grade.
    Thank you!

    Hello gentlemen,

    I’ve been banging my head at this and got the mobile menu to work by adding the full path (URL/onepage#link) in my case i.e. https://beatballaballa.org/beta-phase#faq.
    However, it ruins the smooth scroll to id animation by loading the URL, then reloading it again to scroll to the anchor.

    You get to see the landing page than the actual one page, back to the landing page (top) and finally the scroll down animation on the one page.

    But for now, it works.

    Chaplin is the top theme on my list, I can’t wait to see it work for one-pagers.

    Thank you for your great Work Anders, best in Gutenberg class.

    Theme Author Anders Norén

    (@anlino)

    Hi @giorgio25b @gatorbri99 @munich,

    I’ve added better support for anchor links in the mobile menu/modal menu in version 1.1.13 of Chaplin, which went live earlier today.

    If you click on a anchor link pointing to an element on the same page now, the menu overlay is closed and the user is scrolled to the top of the element the anchor link points to. If you’re still using Chaplin, please give it a try and let me know if it works like expected.

    — Anders

    @anlino thank you for being on top of this!
    I really appreciate the end result, especially knowing how busy you have been with Twentytweny development.
    It works exactly as expected.
    Excellent work

Viewing 7 replies - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.