Site logo

Archived topic

Arrow on Menu Drop Downs

11 replies · Started by Anonymous on February 12, 2016

Viewing posts 1–12 of 12

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?

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

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?

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 :)

Solved.
It works great. Thank you, Tom!

You're welcome :)

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

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

No problem! :)

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

Thanks,
Jörg

Try this:

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

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.

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

Thanks :)

This archived topic is closed to new replies.