WordPress.org

Support

Support » Themes and Templates » Arrow Indicators on Nav Menu Dropdowns

Arrow Indicators on Nav Menu Dropdowns

  • I’m working on a site built on the Twentytwelve theme and was wondering how to add down arrows to the menu items that contain sub menus. Without these visual indicators the visitor is not made aware that sub menus exist on those main menu items.

    This omission seems very obvious to me but it appears to have escaped the notice of the developers.

    Does anyone know how to add arrows to the nav bar to indicate when there are sub menu items?

    http://wordpress.org/extend/themes/twentytwelve/

Viewing 15 replies - 1 through 15 (of 18 total)
  • Christine Rondeau

    @crondeau

    Volunteer Forum Moderator

    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 http://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:
    http://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.

    Emil Uzelac

    @emiluzelac

    Theme Review Admin

    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.

    Moderator Andrew Nevins

    @anevins

    Forum moderator

    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.

    Christine Rondeau

    @crondeau

    Volunteer Forum Moderator

    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.

    Moderator Andrew Nevins

    @anevins

    Forum moderator

    Consider voicing this opinion in the Requests and Feedback forum
    http://wordpress.org/support/forum/requests-and-feedback

    The Themes and Templates forum is for support.

    Thanks Andrew. Done.

    Emil Uzelac

    @emiluzelac

    Theme Review Admin

    @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 http://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

    paulwpxp

    @paulwp

    Font hero

    @emiluzelac
    Great piece of code indeed!

    @agruenke
    Best for you is to put that in using a Custom CSS plugin
    http://wordpress.org/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.

Viewing 15 replies - 1 through 15 (of 18 total)
  • The topic ‘Arrow Indicators on Nav Menu Dropdowns’ is closed to new replies.