WordPress.org

Forums

Twenty Twelve
Arrow Indicators on Nav Menu Dropdowns (19 posts)

  1. Dave333
    Member
    Posted 2 years ago #

    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/

  2. 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/

  3. Dave333
    Member
    Posted 2 years ago #

    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.

  4. Emil Uzelac
    Theme Review Admin
    Posted 2 years ago #

    That's easy:

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

    Thanks,
    Emil

  5. Dave333
    Member
    Posted 2 years ago #

    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.

  6. Andrew
    Forum moderator & snail smusher
    Posted 2 years ago #

    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.

  7. 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!

  8. Dave333
    Member
    Posted 2 years ago #

    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.

  9. Andrew
    Forum moderator & snail smusher
    Posted 2 years ago #

    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.

  10. Dave333
    Member
    Posted 2 years ago #

    Thanks Andrew. Done.

  11. Emil Uzelac
    Theme Review Admin
    Posted 2 years ago #

    @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

  12. Vivek Nath.R
    Member
    Posted 2 years ago #

    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/

  13. renjipunalur
    Member
    Posted 2 years ago #

    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: '';
    }

  14. Zion Eye Media
    Member
    Posted 2 years ago #

    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...

  15. agruenke
    Member
    Posted 1 year ago #

    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

  16. paulwpxp
    Font hero
    Posted 1 year ago #

    @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.

  17. Emil Uzelac
    Theme Review Admin
    Posted 1 year ago #

    Thank you @paulwpxp :)

  18. agruenke
    Member
    Posted 1 year ago #

    sounds like you guys are getting a bit fancy trying to recode things just to add a simple arrow..... all i did was just go to MS Word and typed a down arrow character ↓ , copied it and then went to my menu and added it to the menu label and done.... no coding needed. Took me less than a min to do.

    you can see the result is the same as your coding http://www.perfectbath.com

    Am i correct or am i missing something? just trying to think outside the box and do things as simply as possible.

  19. paulwpxp
    Font hero
    Posted 1 year ago #

    Manually putting in is not as elegant as automatically detection if has child(dropdown). Also you can't style the arrow as easily.

    On the semantic side, CSS pseudo content is perfect for this because it doesn't really count as real content on the page.

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic