Arrow on Menu Drop Downs – GeneratePress

This topic has 11 replies, 5 voices, and was last updated 7 years ago by Leo.

Viewing 12 posts - 1 through 12 (of 12 total)

Author

Posts
February 12, 2016 at 7:47 pm #172441

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?

February 12, 2016 at 10:51 pm #172450
Tom
Lead Developer
Lead Developer
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;
}
```
February 15, 2016 at 10:24 pm #173016

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?

February 15, 2016 at 11:11 pm #173021
Tom
Lead Developer
Lead Developer
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 🙂
February 16, 2016 at 12:19 am #173027

Qi

Solved.
It works great. Thank you, Tom!

February 16, 2016 at 10:36 am #173149

Tom
Lead Developer
Lead Developer

You’re welcome 🙂

February 18, 2016 at 10:42 pm #173752

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. :]

February 18, 2016 at 11:44 pm #173771

Tom
Lead Developer
Lead Developer

No problem! 🙂

July 16, 2017 at 4:22 am #350080

Joerg

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

Thanks,
Jörg

July 16, 2017 at 9:15 am #350199
Leo
Staff
Customer Support
Try this:
```
@media (max-width: 768px) {
    .main-navigation .menu-item-has-children .dropdown-menu-toggle {
        display: none;
    }
}
```
July 29, 2019 at 11:15 am #970351

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.

July 29, 2019 at 12:02 pm #970380

Leo
Staff
Customer Support

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

Thanks 🙂
Author

Posts