Community Forums › Forums › Archived Forums › Design Tips and Tricks › Drop-down menus in two columns instead of one?
- This topic has 7 replies, 2 voices, and was last updated 10 years, 12 months ago by David Chu.
-
AuthorPosts
-
March 29, 2013 at 10:40 am #31938geeksdreamgirlMember
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)
March 29, 2013 at 3:06 pm #31969David ChuParticipantI'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
Dave Chu ยท Custom WordPress Developer – likes collaborating with Designers
March 29, 2013 at 5:17 pm #31990geeksdreamgirlMemberThanks! I actually just downloaded UberMenu and am trying it out on my test server. We'll see how it goes!!
March 29, 2013 at 5:40 pm #31995David ChuParticipantSuper. 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!
Dave Chu ยท Custom WordPress Developer – likes collaborating with Designers
March 30, 2013 at 11:39 am #32103geeksdreamgirlMemberI 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?
March 31, 2013 at 8:41 am #32252David ChuParticipantI 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
Dave Chu ยท Custom WordPress Developer – likes collaborating with Designers
March 31, 2013 at 9:26 am #32258geeksdreamgirlMemberHuzzah!! 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. ๐
April 1, 2013 at 12:45 pm #32485David ChuParticipantGlad to help, and it's nice to be appreciated! ๐
Dave Chu ยท Custom WordPress Developer – likes collaborating with Designers
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.