Add down arrow to dropdown menu

SOLVE
cjfl
Member

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
0 Upvotes
1 Accepted solution

Accepted Solutions
jzilch
Solution
HubSpot Employee
.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

0 Upvotes
7 Replies 7
jzilch
HubSpot Employee

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 }

 

 

0 Upvotes
cjfl
Member

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

0 Upvotes
jzilch
HubSpot Employee

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. 

0 Upvotes
cjfl
Member

Here's the link to my homepage.

 

Thanks

0 Upvotes
jzilch
HubSpot Employee

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. 

0 Upvotes
cjfl
Member

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

0 Upvotes
jzilch
Solution
HubSpot Employee
.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

0 Upvotes