Streaming live at 10am (PST)

Styling the down arrow on drop down menu


I wonder if I could get some help please?

I’m trying to style the little down arrow in the navbar next to the Mortgage Info link. I’ve styled this sort of thing many times before but for some reason after I apply a class to it, the arrow seems to disappear and get replaced by a little box instead. I just want to make it the same white colour as the rest of the nav links.

Share link below.


Share link

They’re using <i> element for their icon. I’ve been asking freedom for the <i> element in the past :wink: Icon <i> element support

That said, nowadays I don’t care anymore for the <i> element nor for icon-fonts, I put all my efforts into learning and mastering what really counts: SVGs!

So, how I do to custom the arrow of the dropdown menu:

  1. I select the arrow, and I click on display:none, so it’s gone forever.
  2. I add whatever SVG icon I want as a background, non repeat.
  3. I position it where I want and adapt the padding of the menu item to make room for the icon.

That way you can even alter the position of the icon on :hover for example, of alter the visibility and display a second icon on :hover etc…

1 Like

Hi Vincent

Thanks for the feedback…I’ll check out SVG’s. For now, I’ve figured out the problem was trying to style the icon rather than the toggle element. So all fixed. thanks.


1 Like

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.