Responsive setting for Navigation not working properly.

  • Unknown's avatar
    solo013 · Member ·

    This is while using the theme Morden.
    When using HTML Anchors to create an Internal Jump link menu if you change one of the navigation blocks to responsive under display settings the menu will no longer work when it goes into responsive mode on mobile. It works fine still on desktop web browsers though. Links that link to other pages within the site, or external pages still work within the responsive mode.

    Also, when using HTML Anchors some jump links will not jump if there is any type of – _ or other character besides a-z in the name. Such as #Page-Top would not jump back up to the top but #TOP would. This is when making the navigation block the anchor. That one I’m not sure if it’s the theme or just wordpress itself.

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    helper-heroponriki · Member ·

    Dashes should work in the anchor links just fine as long as they’re regular dashes, not em or en dashes:

    https://wordpress.com/support/splitting-content/page-jumps/#create-a-page-jump

    Are you adding the # in the HTML anchor field? You don’t use that symbol there but in the insert page link field instead.

    If you’re still having trouble, can you link us to a post where you’re having trouble and we can take a closer look at the page in the editor to see what might be happening here?

    Thanks!

  • Unknown's avatar
    solo013 · Member ·

    It is the hyphen dash minus. It is the right one or just doesn’t jump to a navigation block with an anchor name with a – in it. I tested it extensively last night.

    I did not put the # in the field only in the navigation box to make it an internal link. I done it properly.

    It works fine on desktop and mobile if I don’t check the box for responsive mode in the navigation block’s options. It works fine on PC if the box is checked, but on mobile when you pull up the menu, it looks like an equal sign =, it displays the text but it will not actually load the internal link. You can press it all day long and it will not jump to the section.

    Let’s not assume I don’t know anything about this please. I’ve been a web developer and programmer for going on 23 years. I don’t have the page set to use the responsive mode in mobile now because it doesn’t work. I’ll have to make a copy of the page when I get the chance, and I’ll post the link here then. It may be a few hours though.

  • staff-blorbo · Staff ·

    I’m having no trouble with this myself following the steps at https://wordpress.com/support/splitting-content/page-jumps/

    Would you please set up a test page on your site illustrating the problem so we can take a closer look?

  • Unknown's avatar
    solo013 · Member ·

    I will as soon as I’m able. It will be at least an hour or two. I think it’s something just with the Morden theme maybe. I followed the instructions there exactly as well. Thank you.

  • Unknown's avatar
    solo013 · Member ·

    I have setup a page to show both issues. I have tried this on chrome and Firefox on desktop. For mobile I’m using chrome on an android phone.

    https://thehuntercotw.wordpress.com/test

    I can use my work arounds no problem but I did want to report the issues.

  • staff-blorbo · Staff ·

    Ok, so in the code there, you have:

    <h4 class="has-text-align-center" id="Notes">Notes <a href="#PAGE-TOP">^</a> <a href="#TOP">^</a></h4>

    And have noted that it’s the #PAGE-TOP which doesn’t work.

    The issue is that there is no PAGE-TOP anchor anywhere on the page for this to go to. You’ll need to add that first: https://wordpress.com/support/splitting-content/page-jumps/#create-a-page-jump

    As for the responsive issue there with anchor links in that navigation block, they do appear to be working properly for me with Safari under iOS 14.6. I do not have an Android phone to test myself, but I have asked a colleague to take a look.

  • Unknown's avatar
    solo013 · Member ·

    I just ran a test and I found the issue causing that. Apparently HTML Anchors are not saved when adding them to Navigation blocks. I guess TOP is a global var that works for that so I’ll just use it.

    I will test adding the full link with the #jump on the end of the link to see if it will load them for me. That may be my only choice if I want to use the responsive version I guess. Please let me know still if their android works for it though.

  • Unknown's avatar
    solo013 · Member ·

    After some more testing it’s definitely just not saving the HTML anchor for navigation blocks. It does save them and work for Paragraph blocks. That should be fixed though, because what else is going to be atop the page if you have a navigation? I guess I could put an image there and link it as the jump spot and then put the menu. ok solved for that one. lol

  • Unknown's avatar
    solo013 · Member ·

    I did test the full link verses just the #link method and it seems to make no difference. I’ll just use it non responsive on the live page. I won’t be able to answer again until much later I have to get back to work.

  • kokkieh · Staff ·

    Hi there,

    After some more testing it’s definitely just not saving the HTML anchor for navigation blocks

    It looks like this is a known problem: there’s an open issue for this over on WordPress.org for the block editor, and any fix will have to come from there before it can be fixed on WordPress.com as well.

    You’re welcome to follow along to see any progress on this issue here:

    https://github.com/WordPress/gutenberg/issues/29401

  • The topic ‘Responsive setting for Navigation not working properly.’ is closed to new replies.