Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • November 14, 2018 at 10:50 am #1033408
    ktiilikka

    Hello,

    (1) I have a drop-down menu on my site that has stopped working on mobile devices (although on desktop it is fine). The drop-down menu items are color sections on one and the same page, and the current problem is that clicking on any of the items takes the user to the top of this page, not to the respective color sections. The problem has occurred after I installed the Polylang plug-in, but I’m not sure if it is directly linked to that.

    (2) Possibly related to the same issue, the address of one of the pages on this site has stopped working as well. I had to change the permalink of the page, adding an underscore after the name, because otherwise typing the address or using the menu link both lead to a strange page that consists of bits of previous versions of my site. I have tried deleting the page (plus emptying the bin) and rebuilding it as well as rebuilding the menu, but the problem persists. This problem also applies to desktop.

    I’d be grateful for advice!

    (Links to website provided as private content.)

    • This topic was modified 6 years, 5 months ago by ktiilikka. Reason: Added problem (2) because these may be interrelated
    November 20, 2018 at 4:27 pm #1035649
    Vinay

    Hey Katja,

    Since all sections are on the same page please try changing the link format from

    https://your-site.com/services/#translation

    to

    #translation

    Also, check your trash pages and clear what is not required.

    Best regards,
    Vinay

    December 11, 2018 at 4:57 pm #1043853
    ktiilikka

    Thanks Vinay,

    I’m afraid changing the link format did not solve the problem. The desktop menu works fine, but the mobile menu doesn’t seem to recognize the color sections. That is, clicking on any of the subitems listed under Services leads you to the top of the Services page. Could you please look into this again, as this is a major obstacle when trying to market my services.

    However, I managed to solve problem (2) of my original post by clearing trash pages. Thanks!

    • This reply was modified 6 years, 4 months ago by ktiilikka.
    December 16, 2018 at 6:17 pm #1045999
    Nikko

    Hi ktiilikka,

    I think the problem is with the hidden Color Section.
    And two ids of the same name doesn’t work properly, try to change the second translation (id) to translation-mobile then on your menu, in Appearance > Menus, instead of having 1 link to translate, make it 2.
    The link for translation in desktop will have for example a class of menu-item-desktop and the menu on mobile which points to #translation-mobile give it a class menu-item-mobile then go to Quick CSS (located in Enfold > General Styling) just add this code:

    .menu-item-mobile {
  display: none;
}

@media only screen and (max-width:767px) {
  .menu-item-desktop {
    display: none;
  }

  .menu-item-mobile {
    display: block;
  }
}

    Hope this helps.

    Best regards,
    Nikko

    December 17, 2018 at 2:53 pm #1046317
    ktiilikka

    Thank you very much, Nikko!

    This works otherwise but, for some peculiar reason, the menu items that I gave the class menu-item-desktop are visible on mobile as well. So, the mobile menu now has two instances of each item, one of which works as it should and the other acting like the items did before this fix. (I noticed that a space was probably missing from the code, but adding it (“max-width: 767px”) did not change the situation.)

    Could you please help me figure out how to hide these extra menu items?

    December 17, 2018 at 10:04 pm #1046562
    Nikko

    Hi ktiilikka,

    Can you try adding this css code in QUick CSS (located in Enfold > General Styling):

    @media only screen and (max-width:767px) {
  #top .av-burger-overlay li.menu-item-452, 
  #top .av-burger-overlay li.menu-item-453, 
  #top .av-burger-overlay li.menu-item-454 {
    display: none;
  }
}

    Hope this helps.

    Best regards,
    Nikko

    December 18, 2018 at 9:12 am #1046755
    ktiilikka

    Thanks again! I’m delighted to see that this fixed the English menu, but the problem still persists with the Finnish one. I assume that the Finnish menu items have different numbers, but guessing and trying took me nowhere. :)

    So, I would still need your help with the Finnish menu.

    December 18, 2018 at 10:01 am #1046771
    Nikko

    Hi ktiilikka,

    Sure this is the code that you should use:

    @media only screen and (max-width:767px) {
  #top .av-burger-overlay li.menu-item-494, 
  #top .av-burger-overlay li.menu-item-495, 
  #top .av-burger-overlay li.menu-item-496 {
    display: none;
  }
}

    If you are curious how I got it, you can try to google or check some google videos regarding web inspector and you’ll find it very helpful :)

    Best regards,
    Nikko

    December 18, 2018 at 10:34 am #1046782
    ktiilikka

    Thank you so very much, Nikko! The Web Inspector is so cool and will certainly be helpful in the future as well. :) :)

    December 19, 2018 at 9:56 pm #1047431
    Nikko

    Hi ktiilikka,

    Glad that we could help you :)
    Thanks for using Enfold and Advanced Merry Christmas!

    Best regards,
    Nikko

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Drop-down menu not working on mobile devices’ is closed to new replies.