ColorlibHQ/Sparkling

Expanding dropdown menu items on mobile

baxxos opened this issue · 7 comments

baxxos commented

Header menu dropdown items are almost impossible to expand when using the mobile version of the page. You have to carefully tap the caret icon, which is really unintuitive and fairly difficult on some devices. In my opinion, it would be a much better solution if the menu item itself acted as the caret.

I don't know if this is really an issue or more of a design thing, however it seems like an issue to me. I had to increase the caret size as a workaround.

Best regards,
Michal

woeterman94 commented

Agreed!

This worked before, after I updated the plugin it stopped working. Not happy about this.

You cannot expect users to click on the small arrow icon (caret sparkling-dropdown) to expand the menu.

@baxxos How exactly did you fix this?

cristianraiber commented

@giucu91 - we need to address this.

  • 👍1
baxxos commented

@woeterman94 obviously, I didn't really fix it - I just slightly increased the caret size using following CSS:

.navbar-default .navbar-nav li > .caret {
    /* Use higher values to increate the caret size */
    border-width: 7px; 
}

Also, the cursor doesn't change to pointer when hovering the caret (both desktop and mobile) so while at it, you may want to fix that too:

.navbar-default .navbar-nav li > .caret {
    cursor: pointer;
}
x2on commented

Same problem here - would also love to have a option for expanded menu on mobile as default

x2on commented

Any news?

cristianraiber commented

I'll be taking over this project and update accordingly once I manage to finish going through all the other WordPress themes @puikinsh has on GitHub :)

💯 I've reached Sparkling and I'm going to start working on the bugs :) Hopefully, we'll be able to roll out an update in a week's time.

cristianraiber commented

Unfortunately, I don't think this can be fixed. There was a previous update released for the menu to address another issue, specifically this one: #151

❗️ Basically, users wanted to be able to click on the 1st-level link and have it take them somewhere. One solution, as presented by Bootstrap, is to make the whole click-able element as wide as the screen. That certainly improves the experience but it also breaks #151.

I'm afraid we can't have it both ways.

🕊 Closing this as it's not an actual theme issue, but rather a revert of a functionality that has been already changed to accommodate user requests.