Need help for icons in dropdown menu nav link

[Davide]

Hi everyone, I’m going crazy Can someone help me? I would like to change the small icons that appear in the menu link when there is a “dropdown menu”. Any ideas?

[pumpkin]

The chevron down is no icon that you can simply change. It’s made with CSS using the ::after pseudo element which simply adds content after the element it’s applied to. In this case, the About Us text.

When you inspect the code and click on the ::after it reveals this:

So to change the look, you’ll need to change the css accordingly.

1. Use the class manager to create the class dropdown-toggle::after.

2. Change the following settings like shown in these screenshots (play around with the settings to see what they do and adjust to your liking):

Basically all this does is creating a square box with a border to the right and the bottom, which then looks like this:

3. Lastly, add the following code to the code editor under “Additional CSS (style.css)”:

.dropdown-toggle::after {
    transform: rotate(45deg);
}

That’s necessary because the class editor currently doesn’t allow css transform properties. It simply adds a 45deg rotation to the now odd looking chevron. You can see the effect in preview.

[AdieJAM]

@Norm just expanding on this if this is ok.

Would it worth adding a little dropdown menu showing various dropdown icons we can select? Just say a few options like we have in the hamburger selection.