Adding a horizontal submenu/secondary menu?

Thanks, Andrew. I will

That’s a clever solution – just adding a second main menu below the first main menu. But it’s not actually what Funkan and I are trying to achieve – we’re trying to make our submenus behave like the main menu items: always visible and highlighted on the current page.

It’s a shockingly difficult thing to do, apparently. It’s taken me two weeks to learn enough css coding to get my horizontal main menu and submenus; to align properly (with submenus lining up with the main menu parent selection instead of aligning left, right, or center), to look right (with custom hover and selection colors), and to function smoothly (sizing their containers without overlap).

But keeping those submenus from disappearing when a page is selected remains elusive. It works perfectly on the link Funkan provided: http://danskebank.se

I had to disable my NoScript add-on to see it in action, but when you click on a main menu item, the corresponding submenu shows up, and the selected submenu item remains highlighted while you’re on the page.

Which is, I feel, the most intuitive, obvious, and spatially-economic navigation structure. I couldn’t get there with my enfold theme, so I bought UberMenu, thinking it would offer this functionality. And I’ve spent days groping in the dark adding new css to get the job done, but still: donuts.

If anyone knows how to keep the submenu visible, I can probably figure out the rest. I can’t believe it’s so difficult. And I’m sure that many users are wasting days of time searching for the answer, as I have.

Thank you ;

ElectricFeet: I started using Firebug yesterday actually, and it is quite helpful on many issues, especially aesthetic ones, where it’s simply a matter of isolating a line of code and editing it to suit your desires.

Functionality is a different matter though, because every website seems to implement a different set of php css and js files that work in tandem apparently, employing different classes and hierarchy nomenclature that look and work nothing like my mega menu code and wordpress files, so I can’t just steal code and drop it into my files. Whenever I try, it either doesn’t do anything, or breaks my entire site (especially when I try to add code to my functions.php child theme file).

And kissing goodbye to the $80 I’ve spend on my theme and plugins so far, and hiring a programmer, well, those options simply reek of defeat. Besides, my nav bar finally looks *sweet* and this is the last obstacle to unmitigated triumph. So it’s no sleep til Brooklyn…

do you mean like http://www.survivor-magazine.com

I coded that back in the days of WP2 which had no custom menu support.

Here is a great tutorial that i found today: http://www.designchemical.com/blog/index.php/wordpress-tips/wordpress-tutorial-current-parent-menu-items-in-custom-menus/

Hope that helps.

gregsaxton: yep, you know exactly what I want I’m trying to do – and that Survivor Magazine website + navigation menu is trés elegant ;

And I’ve been going back to that designchemical.com code all day actually, trying to figure out how to substitute the mega menu classes in there to make it work. But trying to make sense of -this stuff- is horrifying:

#megaMenu,
#megaMenu ul.megaMenu,
#megaMenu ul.megaMenu > li.menu-item,
#megaMenu ul li.ss-nav-menu-mega ul.sub-menu-1 > li > a,
#megaMenu ul li.ss-nav-menu-mega ul.sub-menu-1 > li:hover > a,
#megaMenu ul li.ss-nav-menu-mega ul ul.sub-menu .ss-nav-menu-header > a,
#megaMenu ul li.ss-nav-menu-mega ul.sub-menu-1 > li > span.um-anchoremulator,
#megaMenu ul li.ss-nav-menu-mega ul ul.sub-menu .ss-nav-menu-header > span.um-anchoremulator
#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-mega ul.sub-menu-1 > li.menu-item
#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-mega ul ul.sub-menu .ss-nav-menu-header
#megaMenu ul.megaMenu > li.menu-item.ss-nav-menu-item-depth-0 > a,
#megaMenu ul.megaMenu > li.menu-item.ss-nav-menu-item-depth-0 > span.um-anchoremulator
#megaMenu ul.megaMenu > li.menu-item > span.um-anchoremulator
#megaMenu ul.megaMenu > li.current-menu-item > a, #megaMenu ul.megaMenu > li.current-menu-parent > a, #megaMenu ul.megaMenu > li.current-menu-ancestor
#megaMenu ul.megaMenu > li:hover > a span.wpmega-link-title,
#megaMenu ul.megaMenu > li:hover > span.um-anchoremulator span.wpmega-link-title,
#megaMenu ul.megaMenu > li > a:hover span.wpmega-link-title,
#megaMenu ul.megaMenu > li > span.um-anchoremulator:hover span.wpmega-link-title,
#megaMenu ul.megaMenu > li.megaHover > a span.wpmega-link-title,
#megaMenu ul.megaMenu > li.megaHover > span.um-anchoremulator span.wpmega-link-title

…apparently I need to substitute the correct terms above, in the right places for these:

.menu
.menu li
.menu li a
.menu li ul
.menu li ul li
.menu li ul li a

…but that’s proving to be Very difficult to do without a Rosetta stone…and my usual strategy of “try all permutations until something happens” has been going n0where…

Also, I keep getting distracted by tantalizing prospective solutions involving some kind of jQuery and/or php code, like this: http://stackoverflow.com/questions/20998261/dont-toggleslide-div-if-other-div-is-expanded-slid-open

But unfortunately, nobody ever seems to mention where and how to implement these kinds of solutions :/

chappie: thank you for the inspiring response =P I feel like I was just getting warmed up, then I got derailed by the beguiling intricacies of of navigation system (which I feel is the vital key to framing all of the content to follow).

I actually tried to scrap the whole Ubermenu schtick earlier today, but a perverse iteration of my menu remained in the header even when I deleted all of my menus(!). Everything went back to normal after I re-created the existing Ubermenu navigation up now. Weird. Frustrating, also. Apparently I’m stuck with the horrors of Ubermenu’s convoluted class codes…brrr!

The Enfold theme came with that nice Layerslider plugin…I played with it for a few days and scrapped some early efforts to get a feel for it. It’s pretty flexible – in fact if it had a hover-active function for layers, I could’ve made a tight menu with it.

Thanks for pointing out that @media issue – I hadn’t noticed that. I think the Search box color problem is in the theme styling, but I reckon I’d best see if I can make the menu function before I look into it – I’m *very* concerned about throwing out the whole menu over this rotten submenu current-menu-item-parent-thingy issue 0.o

@scourge666 – since you now have a lot of time on your hands, I’d be grateful if you could make menu2 mouseover-contextual…ie it changes as you mouseover menu1.

It would then be perfect, imho.

So here’s the code you need if you want to make your mega menu submenus persistent – i.e., until a new main menu item is clicked. You can drop this into your custom.css stylesheet and it won’t mess up your formatting:

/* Required to hide submenu when inactive */
#megaMenu ul.megaMenu > li.menu-item > ul.sub-menu {
display: none !important;
}

/* This is the rule that displays sub-menus when a parent link is clicked */
#megaMenu ul.megaMenu > li.menu-item.current-menu-parent ul, #megaMenu ul.megaMenu > li.menu-item.current-menu-item ul {
display: block !important;
}