Dropdown menu on mobile device

Hello there!

I’m using Sparkling theme and I have an issue with header menu. One of the entries on that menu has a dropdown menu.

The menu is like that:
Home | Products | About | Contact

where the item Products has a dropdown menu:
Products ----> Product 1 | Product 2 | Product 3

I set a custom link (#) to Products and on the desktop everything works fine. When I mouse on the item Products the dropdown menu goes down.

In a mobile device it doesn’t work. The dropdown menu only appears if I tap on the (tiny) arrow.

What am I supposed to do to make the dropdown menu show up by tapping on the text Products (instead of the arrow)?

Thank you for any help!

Hey there,
I hope you’re doing well today

Could you provide me with the URL for you website so I can have at the look at the issue?

Best Regards,
Support

I have the same problem. The drop down menu on mobile was great before the update. Now I have to click on the tiny arrow to get it to work. https://psycheseminars.com

@laraberchdesigns This change is made in the theme because many users requested to make top level menu clickable on mobile devices.

Thank you for answering but the drop down menu is not clickable in mobile unless you click on the tiny little arrow. People normally click on the menu item, not the tiny little arrow that you can hardly put your finger on. The drop down menu item itself is not clickable. Can you please let me know how to modify the code to make it function like it did before the back up.

You can try achieving this by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Customize -> Additional CSS

@media (max-width: 768px){
.navbar-nav>li>.caret {
    position: absolute;
    top: 0;
    left: 0;
    padding: 30px 90px;
    border: 0;
    width: 100%;
}

.navbar-nav>li>.caret:after {
        display: inline-block;
        content: "";
        border-top: 4px dashed;
        border-top: 4px solid\9;
        border-right: 4px solid transparent;
        border-left: 4px solid transparent;
        margin-bottom: 13px;
}
}

Thank you! Thank worked great!

You are most welcome here :slight_smile: