Add down arrow to dropdown menu

[cjfl]

I'd like to add the down arrow icon to a menu with child items. Can anyone help with the code I need to use? It can't be much. Thanks

[jzilch]

Hi, 

I would take a look through this post here. https://community.hubspot.com/t5/CMS-Development/Styling-dropdown-menus-need-to-add-to-templates-fro.... This is how you can implement a dropdown in the menu in HubSpot. It would require some knowledge of CSS. 

TLDR; 

You would want to add in a pseudo class to the menu item you want the arrow icon and then use FontAwesome to add in the icon using their icon unicode. The code might look something like the following. 

.hs-menu-wrapper.hs-menu-flow-horizontal > ul li.hs-item-has-children:after {
 font-family:'FontAwesome';
 content:"\f078"; 
 top:-40px;
 position:relative
}

[cjfl]

Hi. Yes I saw this on the other thread and I tried it but the arrows are just sticking to the top of the page and not aligning with the text in the menu.

What would adjust this?

.row-fluid .mainmenu .hs-menu-wrapper.hs-menu-flow-horizontal > ul li.hs-item-has-children:after { font-family:'FontAwesome'; content:"\f078"; }

[jzilch]

Do you have a live link to the page you're working on so I would try and take a look for you? It looks like it's related to the posiitoning of the pseudo class if the arrow is going to the top of the page. 

[cjfl]

Here's the link to my homepage.

Thanks

[jzilch]

Thanks for the link this was very helpful. You were very close but instead of trying to add the pseudo class to after the li you would want to add the pseudo class after the ancohr tag. I would try the following code. 

.row-fluid .mainmenu .hs-menu-wrapper.hs-menu-flow-horizontal > ul li.hs-item-has-children a:after {
   font-family:'FontAwesome';
   content:"\f078";
   padding-left: 5px;
}

The only item I added was the anchor tag at the very end after the li and also a bit of padding to give the arrow a bit more room. 

Let me know if this helps. 

[cjfl]

That's great, thank you. But now another problem. The child items in the mobile menu also have the arrow (see below). How do we remove the arrow from the child items?

Thanks for your help.

[jzilch · Accepted solution]

.row-fluid .mainmenu .hs-menu-wrapper.hs-menu-flow-horizontal > ul li.hs-item-has-children > a:after {
   font-family:'FontAwesome';
   content:"\f078";
   padding-left: 5px;
}

This code should do it. You are using the hs-item-has-children but we only want  direct children of these to have the arrow. I added the > selector between the li and anchor tag and this shoudl fix that issue for you on mobile.