Dropdown menu on mobile device

Sparkling
1

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!

2

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

3

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

4

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

5

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.

6

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;
}
}
7

Thank you! Thank worked great!

8

You are most welcome here :slight_smile:

9

I know this is an old post, but this one helped me partly with the issue I was seeing with the menu not being clickable so I thought I’d share for others. This code made the caret move over closer to the text but did not make the text itself clickable. It also wouldn’t allow for sub menu items that are also parents to expand when tapped. This is my solution. Hopefully someone else finds it useful:

Add this bit of CSS you add under the WP-Admin–>Appearance–>Customize–>Additional CSS:

@media (max-width: 768px) {
/* Target clickable items with children and apply full styles <em>/
.navbar-nav li.unclickable.dropdown.menu-item-has-children a {
padding-right: 30px; /</em> Adjust as needed for caret <em>/
position: relative; /</em> Establish positioning context */
}

.navbar-nav li.unclickable.dropdown.menu-item-has-children a:after {
content: “”;
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 0;
height: 0;
border-top: 4px dashed;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
}

.navbar-nav li.unclickable.dropdown.menu-item-has-children .caret.sparkling-dropdown {
position: absolute;
top: 0;
left: 0;
padding: 15px 30px; /* Adjust as needed */
width: 100%;
border: 0;
}

/* Ensure submenu links are clickable <em>/
.navbar-nav li.unclickable.dropdown.menu-item-has-children ul.dropdown-menu li a {
display: block; /</em> Ensure full link area is clickable <em>/
padding: 10px 20px; /</em> Adjust as needed */
}

/* Target submenu items without children and remove caret <em>/
.navbar-nav li.unclickable.dropdown ul.dropdown-menu li:not(.menu-item-has-children) a {
padding-right: 5px; /</em> Adjust as needed */
}

.navbar-nav li.unclickable.dropdown ul.dropdown-menu li:not(.menu-item-has-children) a:after {
content: none; /* Remove caret */
}

/* Target items without children (top-level) and apply minimal styles (no caret) <em>/
.navbar-nav li.unclickable.dropdown:not(.menu-item-has-children) a {
padding-right: 5px; /</em> Adjust as needed */
}
}

No guarantees that it’ll work for you but thought I’d share.

10

Hi there

@GordonH thank you so much for sharing this information with us, very appreciated

Regards,