Add down arrow to dropdown menu

SOLVE
Highlighted
New Contributor

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

CSS
Reply
0 Upvotes
1 Accepted solution

Accepted Solutions
Highlighted
Solution
HubSpot Moderator
.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. 

View solution in original post

Reply
0 Upvotes
7 Replies 7
Highlighted
HubSpot Moderator

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 }

 

 

Reply
0 Upvotes
Highlighted
New Contributor

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.

 

menu error.png

 

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"; }

Reply
0 Upvotes
Highlighted
HubSpot Moderator

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. 

Reply
0 Upvotes
Highlighted
New Contributor

Here's the link to my homepage.

 

Thanks

Reply
0 Upvotes
Highlighted
HubSpot Moderator

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. 

Reply
0 Upvotes
Highlighted
New Contributor

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.

 

Screenshot 2019-03-22 at 20.08.25.png

Reply
0 Upvotes
Highlighted
Solution
HubSpot Moderator
.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. 

View solution in original post

Reply
0 Upvotes