Skip Navigation

[Resolved] Dropdown Menu Icon

This support ticket is created 3 years, 11 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

No supporters are available to work today on Toolset forum. Feel free to create tickets and we will handle it as soon as we are online. Thank you for your understanding.

Sun Mon Tue Wed Thu Fri Sat
- 7:00 – 14:00 7:00 – 14:00 7:00 – 14:00 7:00 – 14:00 7:00 – 14:00 -
- 15:00 – 16:00 15:00 – 16:00 15:00 – 16:00 15:00 – 16:00 15:00 – 16:00 -

Supporter timezone: Europe/London (GMT+01:00)

This topic contains 8 replies, has 2 voices.

Last updated by Nigel 3 years, 10 months ago.

Assisted by: Nigel.

Author
Posts
#1636837
Screen Shot 2020-05-24 at 10.49.31 PM.png

Tell us what you are trying to do? - I am trying to change an icon within a dropdown menu. Currently, it displays as a double-arrow, but I'd like it to appear as: v (just a single, downward pointing arrow)

Is there any documentation that you are following? - I've searched for material within existing support threads, but haven't found the answer yet.

Is there a similar example that we can see? - I've uploaded an image of what I am trying to change

#1637193

Nigel
Supporter

Languages: English (English ) Spanish (Español )

Timezone: Europe/London (GMT+01:00)

Screenshot 2020-05-25 at 10.30.51.png

Hi Jason

I think that icon and the styling for the select dropdown come from your theme, it's not output by Toolset.

In my screenshot you can see the (somewhat ugly) dropdown styling with the twentytwenty theme viewed with Firefox.

Try changing your theme to twentytwenty, you should see something similar.

Different browsers have different default styles, but these can be overridden with CSS. It looks like your theme is doing that, and you would need to check how it is doing that to see the best way to change it. (If you look at the CSS the theme applies you should be able to provide a simple override targeting the same selectors.)

#1637619

Hi Nigel,

I have tried 2016-2020 WP Themes and the double arrows are still showing. I don't know how to call the icon either with CSS. Any ideas?

Thanks so much!

#1637731

Nigel
Supporter

Languages: English (English ) Spanish (Español )

Timezone: Europe/London (GMT+01:00)

Do you have a link to where I can see it on the front end?

#1638101

Hey Nigel,

Make the next comment private and I'll give you login credentials. The site is not currently live, so no public link.

Thanks for your help!

#1638135

Nigel
Supporter

Languages: English (English ) Spanish (Español )

Timezone: Europe/London (GMT+01:00)

Sure, I've set a private reply for you.

#1639767

Nigel
Supporter

Languages: English (English ) Spanish (Español )

Timezone: Europe/London (GMT+01:00)

Unfortunately that username/password combination didn't work, and I'm running out of attempts...

Can you edit your last private reply and update?

#1649429

Any word on this?

Thanks

#1650057

Nigel
Supporter

Languages: English (English ) Spanish (Español )

Timezone: Europe/London (GMT+01:00)

buttons.png

Sorry, I didn't see you'd updated the credentials.

I looked at your site, and your select buttons are showing the default styling for dropdowns provided by the browser.

In your case it looks like you are using Safari. You can see how it looks in Chrome and Firefox in the screenshot.

If your theme doesn't impose styling that you'd like you'll need to add it yourself.

Here is a very good guide to the CSS you need to do that: hidden link

(In particular, note that it uses a SVG as a background image for the arrow which is the minimum you'll want to adopt.)

Where in the Search and Pagination section of your View you have already added custom classes to the select inputs (e.g. city-text and country-text) you can add a common custom class to be able to target these selects with your custom CSS.

This ticket is now closed. If you're a WPML client and need related help, please open a new support ticket.