Drop-down menus in two columns instead of one?

Community Forums Forums Design Tips and Tricks Drop-down menus in two columns instead of one?

This topic is: not resolved

This topic contains 7 replies, has 2 voices, and was last updated by  David Chu 1 year ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #31938

    geeksdreamgirl
    Participant
    Post count: 3

    I’m a theme tweaker, but not a coder by any stretch of the imagination, so I would love it if someone could give me a hand with this modification for the Education theme.

    My client has a LOT of pages and of course wants them all in the menu. But the drop-down gets to be way too long. I was wondering if there was an easy fix in CSS to create two columns for the drop-down menus that are longer than 8 items.

    Many thanks!

    e.

    Site in question: http://yourdogsfriend.org/blog (A non-profit dog training school)

    #31969

    David Chu
    Participant
    Post count: 1184

    I’m a CSS hacker, and still, no easy way to do this. Menus, especially dropdowns, are a real CSS challenge. I hear you – for some reason, all the people in the world who have absurd numbers of menu items are magnetically attracted to me. I will attempt persuasion that this is bad usability, oh, and people will never visit 90% of those links because there are too many, but they will not be deterred. It’s a form of deep self-love. :-)

    If I weren’t a CSS hacker and I needed an instant giant menu, I’d probably go for one of those megamenu plugins on Codecanyon.

    You could also try to persuade them to have menus in sidebars, but they can get overly long, too.

    Good luck,
    Dave


    David Chu · Custom WordPress Developer – likes collaborating with Designers

    #31990

    geeksdreamgirl
    Participant
    Post count: 3

    Thanks! I actually just downloaded UberMenu and am trying it out on my test server. We’ll see how it goes!!

    #31995

    David Chu
    Participant
    Post count: 1184

    Super. That one can cover probably anything anyone can think of. Even though I love playing with CSS, megamenus are something to outsource. Then of course, you just pass on the cost to the client and it’s all good!


    David Chu · Custom WordPress Developer – likes collaborating with Designers

    #32103

    geeksdreamgirl
    Participant
    Post count: 3

    I got the UberMenu installed and did the “Genesis Fix” (in functions.php) but the menu is still showing up underneath the main content (and on pages with a calendar widget, under that, too).

    http://lovelybard.com  (hover over Help, My Dog Is)

    …do you know what the CSS tweak is to make it pop over everything instead of hiding?

    #32252

    David Chu
    Participant
    Post count: 1184

    I have a little silver bullet for you. :-) See the following block of CSS? I have commented out the z-index line below. When I did that, the dropdown appeared just fine. Some additional styling may be needed. Hopefully there will be some more settings in Ubermenu you can play with to dial that in.

    #content-sidebar-wrap {
    	-moz-border-radius: 5px;
    	-moz-box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.15);
    	-webkit-border-radius: 5px;
    	-webkit-box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.15);
    	background: #fff;
    	border-radius: 5px;
    	box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.15);
    	float: left;
    	position: relative;
    	width: 980px;
    /*	z-index: 999;   */
    }
    

    I doubt that this z-index figure would be needed for that DIV at all, although you would best look around your site after making this change to make sure. The CSS in this theme is pretty quaint in some ways.

    Dave


    David Chu · Custom WordPress Developer – likes collaborating with Designers

    #32258

    geeksdreamgirl
    Participant
    Post count: 3

    Huzzah!! It works! Tested it in Chrome, FF, Safari, and IE and they’re all looking good. Phew!

    Now to get it to work on the real site. :-)  But first, moving the real site over to VPS today.

    Thank you so much. Who knew that one little line was all that was holding it back?

    Sending you something via your website’s contact form. :-)

     

     

    #32485

    David Chu
    Participant
    Post count: 1184

    Glad to help, and it’s nice to be appreciated! :-)


    David Chu · Custom WordPress Developer – likes collaborating with Designers

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.