Anchor links don't work in "Mobile" mode

  • Resolved jhdean

    (@jhdean)


    10 years ago

    Hello,

    I have a menu with anchor links, each link going to a spot on the page. These all work normally when the page is wide and the anchor title is displayed.

    When the page is compressed into the mobile size and the anchor titles become an icon of solid lines, clicking on the icon produces a fly out menu with each anchor title but the links no longer work. There is no movement to the specified anchor.

    When I deactivated all plugins, clicking on a link caused an extremely minute movement.

    I have seen some reference to anchor links not working in mobile mode from the last few years but have seen no solution.

    Is there a fix for this or are others having success with anchor links in mobile views?
    You can check out the problem at https://www.jhdstaging.jeffreyhdean.com/collect/. The main menu works when compressed but not the ones with the anchor links below it.

    Thanks,
    Jeff

Viewing 6 replies - 1 through 6 (of 6 total)
  • WPyogi

    (@wpyogi)

    Does this happen in other themes? Try switching to a default theme to test it?

    Thread Starter jhdean

    (@jhdean)

    Hello,

    So, I switched to the 2015 theme. The page created with the Divi theme did not display normally in the 2015 theme so I couldn’t test the problem menu.

    I made a test page with anchors and basic links at the top since I couldn’t figure out how to insert the menu on the page. The anchor links worked even when the window was minimized. It also worked in the Divi theme though??

    The menu created in the Divi theme was linking to CSS ids aplied in the Divi modules on the page rather than to normal anchors. I added regular anchors throughout the page and also put the same links from the test page into a text module on the original page. They worked when the window was large but not when minimized. Same as the problem menu. I’ll check with the folks at Elegant Themes to see if they know what’s up.

    Thanks,
    Jeff

    Thread Starter jhdean

    (@jhdean)

    Hello,

    I found the problem. The menu which worked with the wide window linked to places on the page with a CSS class with the name of the anchor. This even before I inserted an actual anchor. This didn’t work when the window was minimized. The other anchor links on the page behaved the same even with specific anchors added on the page for each.

    When I got rid of the class names that were duplicates of the anchor names, both the menu and anchor links worked in all window sizes. I was getting class id’s and anchor names mixed and for some reason linking to a class worked with a wide window.

    Jeff

    Thread Starter jhdean

    (@jhdean)

    I checked and I was using a CSS ID not a class.

    WildstylezWebDesign

    (@wildstylezwebdesign)

    Jhedean: I am trying to get “link to anchor” in Divi modules too:

    Example: Divi Module “call to action” anchor / send to Divi Module “Text”

    I want it to work seamlessly in desktop and in mobile/media view.

    It looks like you resolved the issue. Can you provide a real life example? Like “this” goes in from module “here” and “this” goes in the “to” module “here”

    I appreciate your help.

    Thread Starter jhdean

    (@jhdean)

    I set up a menu using links instead of pages in the appearance/menu page. The link is for example #architectural. On the page where I want to use it, I made a full width section with a full width menu and selected the new navigation menu I created.

    In a Divi text module I put in normal text editing mode, not the visual editing mode. When you switch to visual it should show as a small anchor symbol.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Anchor links don't work in "Mobile" mode’ is closed to new replies.

Tags