the product header 5 component dropdown menu issue

At a glance

A community member encountered a styling issue with the Product Header 5 component in their e-commerce site, where the dropdown menu displays two down arrows/caret icons. Another community member suggested this was due to having both custom select styling and browser native styling.

A solution was provided using CSS to remove the browser native styling with appearance: none and its vendor-prefixed variants. However, another community member clarified that the double arrows should not appear on the published site and is likely only visible in the Webflow designer due to custom code not executing in the designer environment. They mentioned plans to potentially implement this fix in the global styles embed to resolve the issue in the designer view as well.

PPeter Pasco

Hey folks! I’ve been working on a site lately, and I’m running into a hopefully small but annoying styling issue. I’m working with the Product Header 5 component (e-commerce), and I need to keep the dropdown menu.

For some reason, the dropdown menu has 2 down arrows/caret icons. How do I get rid of the smaller icon on the right? I have no idea when and where it came from.

Attachment

5 comments

iindies paradise

Ah yes, you probably have custom <select> styling in addition to the browser native styling

iindies paradise

that's how to remove the browser native style

select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

PPeter Pasco

Great! Thank you for the quick response!

iindies paradise

you're welcome, does it fix it?

MMatt Johnson

the double arrows should not be showing up on publish - if they do thats an error I would like to know - but if they don't thats the intention. However, I was exploring this issue recently and I see no reason why we couldn't implement this custom code into the global styles embed so that in the webflow designer, its also not showing up - I'll test again to confirm and then recommend to the team that we make this change. But yeah, again this should not show up like that on publish and the reason that it shows up at all is because we're using custom code to alter this and some custom code does not execute in webflow designer.

Add a reply

Community forum for knowledge and support

the product header 5 component dropdown menu issue