Change dropdown arrows to chevron

This topic has 8 replies, 2 voices, and was last updated 4 years, 4 months ago by David.

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

Author

Posts
October 26, 2015 at 6:16 pm #147826

Kaleb

Hello,

Please let me know how I can change the dropdown arrows to chevron. I’m using a child theme and would prefer to do it from there.

I tried change the navigate.js but didn’t have any luck. Thanks for your time!

October 26, 2015 at 9:42 pm #147854
bdbrown
Hi Kaleb. You can remove the existing arrows by using this CSS:
```
.sf-menu li a:after {
    border: none !important;
}
```
Then you can add icons to your menu items using the built in Font Awesome library or by using this plugin: https://wordpress.org/plugins/menu-icons/

Adding CSS: https://generatepress.com/knowledgebase/adding-css/
October 27, 2015 at 6:50 am #147966

Kaleb

Thank you for the information. I have the child theme style.css working fine.

I should have specified in the first message that this is for the flyout menu. Applying the CSS you provided didn’t work for this. Maybe it works for the regular menu.

Again thanks for your time with this.

October 27, 2015 at 10:45 am #148010
bdbrown
Instead of what I posted above, give this CSS a try:
```
/* change slideout menu icons to chevrons */
#generate-slideout-menu li .fa-caret-down:before {
    content: "\f078";
}
#generate-slideout-menu li .fa-caret-up:before {
    content: "\f077";
}
```
July 6, 2017 at 5:23 am #344981
Steve
This code:
```
.sf-menu li a:after {
    border: none !important;
}
```
dosnt seem to work anymore.
Could you please tell me how to replace the arrow nowadays?

Thank you very much and have a nice day.
July 6, 2017 at 9:04 am #345070
Leo
Staff
Customer Support
Give this a shot:
```
.menu-item-has-children .dropdown-menu-toggle {
    display: none;
}

.main-navigation .main-nav ul li.menu-item-has-children > a:after {
    border: 0 none !important;
    content: "\f013" !important;
    font-family: FontAwesome;
    line-height: normal;
    margin-right: 10px !important;
    margin-top: -7px !important;
}
```
It would replace a FontAwesome icon in place of the arrow.

You may have to adjust the margins depending on the shape/size of the icon.
July 7, 2017 at 12:30 am #345448
Steve
Thank you very much,

the code would work if I there was not already something in the after element:
```
/* nav link animation*/
.main-navigation .menu > .menu-item > a::after
{
    content: "";
    position: absolute;
    right: 0;
    left: 50%;
    bottom: 15px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    display: block;
    width: 0;
    height: 2px;
    background-color: #fff;
    transition: 0.3s width ease;
}
.main-navigation .menu > .menu-item.current-menu-item > a::after,
.main-navigation .menu > .menu-item > a:hover::after{
    width: 70%;
}
```
do i have to decide what i want (animation or different dropdown logo) ?
December 4, 2021 at 9:05 pm #2038667

liorsade8

hi it doesn’t work,
it gives me squares
any news about it?

i would like to put plus instead

December 5, 2021 at 5:56 am #2038891

David
Staff
Customer Support

Hi there,

this is a really old topic, can you start a new topic where you can share a link to your site and we can provide some assistance.
Author

Posts