Archived topic

Mobile : Place the dropdown on the menu text

7 replies · Started by Andre on September 30, 2021

Viewing posts 1–8 of 8

September 30, 2021 at 1:57 am #1947845

Hi,

Some visitors don't understand that you have to click on the arrow to scroll the sub-navigation on a smartphone.

How can I adapt the code ?
To add class="dropdown-menu-toggle" on
Now is on <span>...

Citizens’ Assemblies<span role="button" class="dropdown-menu-toggle" tabindex="0" aria-expanded="false" aria-label="Open Sub-Menu"><span class="gp-icon icon-arrow"><svg viewBox="0 0 330 512" aria-hidden="true" role="img" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1em" height="1em">

Best regards,
Andre

September 30, 2021 at 6:22 am #1948071

Hi there,

are the Parent Menus a link themselves ? Or do you want them to simply open the sub menu?

Can you share a link to the site so i can see the setup ?

September 30, 2021 at 9:29 am #1948435

Hi,

https://citizens-democracy.ch

No, these are not links.

September 30, 2021 at 10:03 am #1948455

Hi Andre,

Can you try add # as the parent menu item link instead of leaving it blank?

Let me know if this helps :)

October 1, 2021 at 5:13 am #1949181

Perfect, thanks !

If you have contacts with WPML, you can notify them of this problem. Indeed, the problem persists with the navigation of languages.

Best regards, andre.

October 1, 2021 at 5:48 am #1949207

Try adding this CSS to make the language selector behave the same way:

@media(max-width: 768px) {
    .main-navigation.toggled .menu-item-has-children.wpml-ls-menu-item a {
        padding-left: 24px;
        position: relative;
    }
    .main-navigation.toggled .menu-item-has-children.wpml-ls-menu-item .dropdown-menu-toggle {
       position: absolute;
        left: 5px;
        top; 0;
        bottom: 0;
        width: 100%;
        z-index: 1;
    }
}

October 1, 2021 at 9:29 am #1949617

Just perfect!
Wonderful efficiency :)
Thank you.

October 1, 2021 at 9:55 am #1949644

Glad we could be of help!

This archived topic is closed to new replies.

Start building better websites today.