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