[Resolved] Arrow on Menu Drop Downs

[Steve]

Hi Tom,

If I nest a menu item under another on my main nav bar, it makes a little arrow appear. I assume this is just to indicate that there is more under this option.

Is there a way to disable or remove this arrow?

[Tom]

Absolutely – just add this CSS:

.menu-item-has-children .dropdown-menu-toggle {
    display: none;
}

.main-navigation .main-nav ul li.menu-item-has-children > a {
    padding-right: 20px;
}

[Qi]

Thanks a lot, Tom!

I have asked the same question last year, but when I update GP and addons to the newest version, the arrows re-appear.
Now the problem solved. However, how can I enable arrows in sub-menu?

[Tom]

Try this:

ul ul .menu-item-has-children .dropdown-menu-toggle {
    display: block;
}

.main-navigation .main-nav ul ul li.menu-item-has-children > a {
    padding-right: 0;
}

Let me know 🙂

[Qi]

Solved.
It works great. Thank you, Tom!

[Tom]

You’re welcome 🙂

[Steve]

I just got around to getting back to this. Sorry for the late reply.

Thank you for the help, Tom! This will work perfectly. :]

[Tom]

No problem! 🙂

[Joerg]

Hello Tom, how can i remove dropdown menu arrow also in mobile menu?

Thanks,
Jörg

[Leo]

Try this:

@media (max-width: 768px) {
    .main-navigation .menu-item-has-children .dropdown-menu-toggle {
        display: none;
    }
}

[Livia]

I wanted to remove just the dropdown arrows from the nav menu and it worked with this code:
.menu-item-has-children .dropdown-menu-toggle {
display: none;
}

.main-navigation .main-nav ul li.menu-item-has-children > a {
padding-right: 10px;
}

However, it removes the dropdown menu all together on tablets and mobile devices. I just want to remove the arrows on all devices keeping the dropdown menu.

[Leo]

Any chance you can open a new topic and link me to the site in question?

Thanks 🙂

[Author]

Posts