Arrow Indicators on Nav Menu Dropdowns

The only way I’ve managed to do this in the past is to integrate superfish.js into my theme.

If you look at this theme https://themes.wptheming.com/portfolio/
You can see that he has this feature.

There are a few tutorials online on how to do this, but not specifically with twenty twelve.
Here’s an example:
https://wp.tutsplus.com/tutorials/widgets/integrating-superfish-menu-into-a-template/

Thank you for that. It seems overly complicate though for the simple addition of an arrow, which I suspected would be a CSS tweak to add an image background to the heading of a sub menu.

That’s easy:

.nav-menu li > a:after {
    color: #444;
    content: ' ?';
}

.nav-menu li > a:only-child:after {
    content: '';
}

Thanks,
Emil

Thanks Emil!

That worked really well. However, it’s only one colour, the dark #444 is only usually used for the active menu item. So I changed it to this:

.nav-menu li > a:after {
    color: #888;
    content: ' ?';
}

.nav-menu li > a:hover:after {
    color: #444;
    content: ' ?';
}

.nav-menu li > a:only-child:after {
    content: '';
}

I really don’t understand why this wasn’t part of the theme to begin with. I guess there are lots of improvements. Still, this is their flagship theme, you’d think they’d make it perfect to demonstrate how excellent WordPress is.

Not really, perfection is in the eye of the beholder. Sorry for the cliché, but imagine if everyone recommended their favourite features on the theme. Twenty Twelve only satisfices.

I’m with Andrew, perfection is in the eye of the beholder. I’ve never included any arrows in my theme and don’t see the need for them.

If we all liked the same things, we would live in a very bland world. ??

Thanks @emil for the CSS trick. I didn’t know that. Even less need for superfish. Yippee!

I can’t agree. The drop down arrows indicate that there are a sub menus, it is a functional necessity, not a “favourite feature”.

Without them the user has no idea there is a whole list of pages under that heading. The absence of the arrows is unnecessarily hiding whole sections of your website from view.

It’s got nothing to do with what one likes or doesn’t like, or in the eye of the beholder. It is about basic functionality, or lack of.

Consider voicing this opinion in the Requests and Feedback forum
https://www.ads-software.com/support/forum/requests-and-feedback

The Themes and Templates forum is for support.

Thanks Andrew. Done.

@dave333 No problem at all, glad to suggest. The colors was just to say that we can style that as too.

@christine you’re very welcome ??

Emil

Hello Dave333,

The simple solution is using ALT code, that means a combination of numbers and Alt key. Press

ALT + 25

and you will get this result “↓” .
I’m using this technique for my blog. You can check it out on my blog https://www.digitaladvices.com/

i think using images is better try it… ?? anyway thanks Emil

#primary-nav li > a:after {
color: #fff;
content:url(images/dropd.png);
}

#primary-nav li > a:only-child:after {
content: ”;
}

This is a good technique but unfortunately (for me at least), I have clients that still use IE8+ and this doesn’t work well on IE. I do love the fact that I don’t have to use superfish to make it happen…

Hi Guys, this is exactly what i need. Only i am not sure where do i enter those few lines of code to make my menu bars show the arrow when there are sub menues?

please bear with me i am not so good at coding but i can follow instructions…lol

also i like the idea of using the image as in renji post but not sure if i have to upload an image somewhere for it to use it? can someone please help with this too?

Thanks guys

@emiluzelac
Great piece of code indeed!

@agruenke
Best for you is to put that in using a Custom CSS plugin
https://www.ads-software.com/plugins/search.php?q=custom+css

and yes, upload the image into your WP site and get the image url to use in CSS. Go to your About page, upload that image and don’t insert into it, just upload and get the image url.