Mobile menu parent item to open child menu when clicked

Hi @paulcobb,

I’ve been looking at this for a moment, I’ve attempted a start by making the dropdown toggle take up the full width of the menu item, which seems to help cover over the default # anchor link.

button.dropdown-toggle {
    width: 100%;
    text-align: right;
}

Just of note, by default this is going to cover any menu with sub-menu items. You could change this by adding an additional class to your menu items from within wp-admin like such.

https://d.pr/i/PeTQjW

I added the .cover-me class, which then makes my CSS look like this.

.cover-me button.dropdown-toggle {
    width: 100%;
    text-align: right;
}

I hope this helps so far, let us know if you’ve got further questions. Thanks!

Thanks @ryanr14 for picking this up.
Well I applied your code to my menu but I can’t actually see that it changes anything?
Just to clarify what I am actually wanting to achieve:
The parent menu item is named ‘Shop’
The children are the shop categories.
On the destop menu when hovering over ‘Shop’ the child menu appears as expected.
On the mobile menu I want the child menu to expand when ‘Shop’ is clicked and collapse when next clicked.
The same functionality as when clicking ‘V’ at the side of the mobile menu item.
Do-able?

Hi @paulcobb,

What CSS had you added? If you’d used my second example, it relied on you adding a class to your menu link.

See if this video helps show what I’d accomplished so far. https://d.pr/v/yQwuxA

Schoolboy error!
I was putting the cover-me class in ‘Tile Attribute’ rather than ‘CSS Classes’.
Yes it works as you said!
Many thanks for this – I will test out and report back.

Hi @paulcobb,

Schoolboy error!
I was putting the cover-me class in ‘Tile Attribute’ rather than ‘CSS Classes’.
Yes it works as you said!

Hopefully that does work for you, let us know!