Nav Nestable Dropdown with 2 icons

How To
1

Hi, how can we have a Nav dropdown item with an icon to the left, but still retain the ‘down chevron’ to the right to indicate the dropdown?

My use case is a Login Button…

Screenshot 2023-10-18 at 16.56.33

1 Like
2

I haven’t done this myself yet but I think this is a case for the pseudo ::before class.

Reference: ::before - CSS: Cascading Style Sheets | MDN
Example: https://codepen.io/arjunamgain/pen/povMYm

1 Like
3

Thanks @d19dotca!

I was able to achieve it with the below. I had to use ‘::after’ because ‘::before’ had problems on hover due to other Bricks CSS.

%root%::after {
  font-family: "Font Awesome 5 Free";
  content: "\f007";
  position: absolute;
  left: 0;
  top:0;
  color: var(--light);
}

%root% .brx-submenu-toggle {
  padding-left: 1.75rem;
}
4

Or you simply insert it :slight_smile:

1 Like
5

Oh wow, thanks very much!

7

You solution doesn’t work at all on mobile.
I’ll have to put “flex-wrarp:wrap;” in CSS to fix the row issue on the dropdown content