Archived topic
Click first menu item on Mobile Header
5 replies · Started by blackbird on July 21, 2021
Hi, I need help with how to handle my main menu first items with dropdown on mobile.
I have dropdown sub menus and I absolutely want to use Hover on desktop. But I don´t want the arrows added by GP on desktop, so I have hidden the arrows on desktop with CSS. Works fine.
On mobile I use "Off canvas" menu (set to my main menu).
My problem is the only area that is clickable to open the sub menus is those small arrows besides first menu items. I want the entire first menu item to be clickable on mobile!!
I have already made the first menu items as Custom Links with "#". After saving the menu I deleted those "#", because otherwise when hoovering on desktop it looks like the first menu items are links, when in fact they are not. Not the biggest problem, but looks a bit confusing when in fact it is NOT clickable.
So everything works perfect on desktop when hover over and open the sub menu items.
But on mobile it feels like I have found a bug??
If I delete the "#" I can only click on the arrow, on mobile.
And If I click on the actual first menu item the off canvas panel just get closed! Confusing for visitors to say the least!
If I instead leave the "#" in place I can click on the entire first menu item on mobile (as I want to!!) to open the sub menu. But then again, it looks like first menu item is a link, when hoovering on desktop... I do not want that.
I do not care if there is an arrow present or not on mobile, not important. I want hover without arrow and without #-link on desktop, and clickable first menu items on mobile, to open sub-menu items.
Hopefully it is possible?
(I have tried to find the solution in the forum, bit failed.)
Hi there,
the simplest solution would be this:
.main-navigation .main-nav > ul > li:first-child > a {
cursor: default;
}It will set the first parent menu items cursor to default.
Hmm, that sound like a great and easy solution! I haven´t seen that before in any thread.
But I do not see anything changing..? But if I change to this it looks like it is working!
.main-navigation .main-nav ul li.menu-item-has-children>a {
cursor: default;
}
Would you agree?
Yep that would do it for any parent items :)
Then I´m happy with that! Thank you so much!! :-)
You're welcome
