Arrows in the super fish menu

Hello,
I have looked at the website which you have mentioned for SUPER FISH MENU.It seems that the Fashionistas theme is having NO OPTION for the ARROWS in the SUPER FISH MENU.So here is what you need to do…Just copy the following code and paste it into your CSS.

.sf-menu li.menu-item-has-children:after {
display: block !important;
content: ” !important;
border: 3px solid transparent;
border-top: 5px solid black;
margin-left: -16px;
margin-top: 22px !important;
}

Explanation:
WP automatically adds CLASS to the li which has the dropdown (CHILD elements).So we can use this CLASS name (menu-item-has-children) to ADD ARROWS to the MENU elements which have dropdowns.

Again: (I will recommend using custom CSS plugin if you want to ADD Custom CSS to your theme.Just use this PLUGIN:I like My Custom CSS)

Let me know if you have any questions.Thanks

Thank you very much for your help and explanation ?? Now I can see the arrows. I customize a little bit your code because the border was a little strange. Here my code:

.sf-menu li.menu-item-has-children:after {
display: block !important;
content: '?' !important;
border: 0px solid transparent;
border-top: 0px solid black;

float:right;
margin-top: -27px !important;
margin-right: 15px;
}

Anyway, now I would know if there is any way to get that the arrows of the main menu (first level items) will disappear.

Thanks a lot.

Hi,

If you want to display the ARROWS with the LI elements of the DROP DOWN, which have the CHILD items(sub menu).You can use this code to display the ARROWS with them.

.sf-menu li:hover ul li.menu-item-has-children:after, .sf-menu li.sfHover ul li.menu-item-has-children:after {
display: block !important;
content: '?' !important;
border: 0px solid transparent;
border-top: 0px solid black;
float: right;
margin-top: -27px !important;
margin-right: 15px;
color: white;
}

Please let me know if you have any question.Thanks

Hi Ali-Usman,

thank you very much for your help. The code that you give me doesn’t work in my wordpress, anyway it gives me some clues…

I resolve with this code:

.sf-menu li li.menu-item-has-children:after {
display: block !important;
content: '?' !important;
border: 0px solid transparent;
border-top: 0px solid black;

float:right;
margin-top: -27px !important;
margin-right: 15px;
}

So, like that, I have my arrows in the child elements of the menu and not in the parent.

Thanks.