WordPress.org

Ready to get started?Download WordPress

Forums

Customizr
[resolved] Adding a horizontal submenu/secondary menu? (31 posts)

  1. Funkan
    Member
    Posted 8 months ago #

    Is it possible to add a secondary, horizontal menu under the original one, that is always visible? Not at dropdown or on hover?

    I would like to always show the top level menu, and then the first sublevel underneath it, as they do on this page: http://danskebank.se

  2. nikeo
    Member
    Theme Author

    Posted 8 months ago #

    Hi Funkan, this is the customizr support forum (you are not using this template on the provided url).
    Cheers

  3. Funkan
    Member
    Posted 8 months ago #

    No, I have only a locally installed testsite at the moment, with the Customizr theme installed.

    The provided url is not my site, just an example of how I would like the menu to look like and work.

  4. acub
    Member
    Posted 8 months ago #

    add_action( 'init', 'register_secondary_menu' );
    function register_secondary_menu() {
        if ( function_exists( 'register_nav_menu' ) ) {
            register_nav_menu( 'secondary-menu', 'Secondary Menu' );
        }
    }
    
    add_filter('__header', 'display_secondary_menu', 1000, 0);
    function display_secondary_menu() {
    	echo ( has_nav_menu( 'secondary-menu' ) ? wp_nav_menu (
            array (
                'theme_location' => 'secondary-menu',
    			'container_id'    => 'secondary-menu',
    			'container_class'    => 'secondary-menu'
            )
        ).'<div class="clearall"></div>' : '' );
    }

    Of course, you need to actually create a new menu and assign it in the new location and perhaps style it a bit. A basic styling would be:

    #secondary-menu ul { text-align: center; list-style-type: none;}
    #secondary-menu ul li {display: inline-block; padding: 0 5px;}

    This removes the bullets from menu items and centers them with a bit of left-right padding. The sky is the limit here.

  5. Funkan
    Member
    Posted 8 months ago #

    Thank you acub? Where do I put the php-code? In class-content-post_navigation.php? And in that case, where in the code? I'm just starting to get comfortable editing things in the php, but I'm not there just yet :P

    Regards,
    Johanna

  6. acub
    Member
    Posted 8 months ago #

    You put it in your child theme's functions.php. If this is the first customization done using a custom function, your child theme's functions.php should be empty, having only one line:

    <?php

    which opens up php mode, but no actual php code. So basically this is how your child theme functions.php should look like after you add the code above:

    <?php
    
    add_action( 'init', 'register_secondary_menu' );
    function register_secondary_menu() {
        if ( function_exists( 'register_nav_menu' ) ) {
            register_nav_menu( 'secondary-menu', 'Secondary Menu' );
        }
    }
    
    add_action('__header', 'display_secondary_menu', 1000, 0);
    function display_secondary_menu() {
    	echo ( has_nav_menu( 'secondary-menu' ) ? wp_nav_menu (
            array (
                'theme_location' => 'secondary-menu',
    			'container_id'    => 'secondary-menu',
    			'container_class'    => 'secondary-menu'
            )
        ).'<div class="clearall"></div>' : '' );
    }

    The css should be added in style.css of the child theme or in the custom CSS panel in theme customizations page. If you don't already have a child theme, you should make one (read about how to make one on theme's webpage, in tutorials).

    Please note that in the initial code I added the display menu function as a filter on "__header". I realized when looking over the code again that it should be done as an action in this case, not as a filter. It works both ways, but since I'm not filtering anything, just adding code to the header, it should be done through action. I also believe it's a bit faster. Anyway, the code from this post has been updated.

  7. Funkan
    Member
    Posted 8 months ago #

    I already have a child theme. Thank you so much, it sure did the trick.

  8. bagedi
    Member
    Posted 8 months ago #

    It's working like a charm but both menu staying up there and can't choose one of them or both or may be to leaveone sticky menufixed at the top ...

  9. bagedi
    Member
    Posted 8 months ago #

    "before__header" make it up the nav wraper and you will need css to style it the only problem ihave now isto can chose what from both to use tohide one when i'm using other ...

  10. acub
    Member
    Posted 8 months ago #

    I believe the hook is "__before_header", if you want it above header.

  11. nikeo
    Member
    Theme Author

    Posted 8 months ago #

    @acub : nice !

  12. bagedi
    Member
    Posted 8 months ago #

    yes found and put on the right place. but can't stuck menu and need to control other nav_wraper want to use admin control to make it ... but is little bit difficutl for me. Now i have secondary menu and can chose from admin panel ifi want to use but i don't need wraper and brander up just want to close them

  13. acub
    Member
    Posted 8 months ago #

    bagedi, I don't understand the nature of your problem. A link would be helpful.

  14. acub
    Member
    Posted 8 months ago #

    @bagedi: Please note the functions above only create a new menu location in the layout. In order to see your menu you need to go to Dashboard > Appearance > Menus, create/manage your menus and assign one in the newly created location.

  15. borismod
    Member
    Posted 8 months ago #

    Hello, I am also trying to make the sub-menu appear horizontally. I tried the above with creating a child theme of Customizr and adding the function.php and style.css as described above. The sub-menu still appears as drop down menu and not as horizontal static menu.

    Any ideas?

  16. borismod
    Member
    Posted 8 months ago #

    Actually, it works but not as I expected it to work. I need the sub menu to be displayed horizontally beyond the main menu.

    How can I achieve this?

  17. Andrew
    Forum Moderator
    Posted 8 months ago #

    You may need to create a new thread for this.

  18. borismod
    Member
    Posted 8 months ago #

    Thanks, Andrew. I will

  19. acub
    Member
    Posted 8 months ago #

    @borismod: You don't need a new thread for this, as it's exactly what Funkan asked for and exactly what the solution provided above does. You may see the code above in action here (both php and css). If you need a more complex menu, you'll need to extend the CSS.

    If you want your menu to be displayed horizontally just make sure all your menu elements from secondary menu are top level (no children). The CSS provided above is basic and is only intended to make a single level menu show up ok. If you want a multi-level menu you need to style it further (hide 2nd level items and above, only display them on parent:hover, position them absolute, provide proper padding and dimensions, etc...).

  20. scourge666
    Member
    Posted 6 months ago #

    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 ;

  21. ElectricFeet
    Member
    Posted 6 months ago #

    Scourge666: if you're having such difficulty with the CSS, perhaps it would be better to choose a theme that has these sorts of menus built in? Or hire someone to help you?

    If you want to take the harder route, then I suggest you learn Firebug and use it to work out how other sites do what they do that you like.

  22. scourge666
    Member
    Posted 6 months ago #

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

  23. scourge666
    Member
    Posted 6 months ago #

    Here's what I've got so far if anyone cares to see:
    http://morrisonsculpture.com/blog/bronze-sculpture

    I haven't taken the time to clean up all of the inactive code yet (carcasses of the learning process), but there's a time to work, and a time to clean...

  24. gregsaxton
    Member
    Posted 6 months ago #

    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.

  25. chappie
    Member
    Posted 6 months ago #

    @scourge666 - congratulations! That's an astonishing job from a newbie. Shows what's possible with Customizr when a thrusting young structural engineer inhabits the same skin as a seasoned aesthete/minimalist.

    I'm wondering whether your menu-to-die-for is reproducible without the help of UberMenu... And I'm wondering where that amazing Search tool came from...

    (Also wondering what you have done to your slider but that's obviously not for this thread).

    You still need to sort out your 3-bar menu - and change some of the @media rules to prevent your menu running into your logo between 990px and 767px; and the colours in your Search field need to change for legibility. But wow!

  26. scourge666
    Member
    Posted 6 months ago #

    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

  27. scourge666
    Member
    Posted 6 months ago #

    gregsaxton: lol - get this...I took your advice and abandoned my futile efforts to mess with jQuery and/or php, and copied that code from the designchemical.com site:
    http://www.designchemical.com/blog/index.php/wordpress-tips/wordpress-tutorial-current-parent-menu-items-in-custom-menus/

    And then took a wild stab at making a Rosetta stone, to make that code work with my insane Ubermenu class structure, roughly as follows:

    .menu = #megaMenu ul.megaMenu
    .menu li = #megaMenu ul.megaMenu > li.menu-item
    .menu li a = #megaMenu ul.megaMenu > li.menu-item > a
    .menu li ul = #megaMenu ul.megaMenu > li.menu-item > ul.sub-menu
    .menu li ul li = #megaMenu ul.megaMenu > li.menu-item > ul.sub-menu > li.menu-item
    .menu li ul li a = #megaMenu ul.megaMenu > li.menu-item > ul.sub-menu > li.menu-item > a

    And after stripping out all of the styling I didn't need, it kinda works ;P Thanks for steering me in the right direction! Man, I'm kinda shocked that the "blind man in a dark room looking for a black cat which is not there" uhm, strategy(?) sorta paid off.

    I'll try to flesh out the kinks after some sleep and post the patch I stumbled upon, for the next feckless blighter who gets cornered by this maze of code madness...

  28. chappie
    Member
    Posted 5 months ago #

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

  29. scourge666
    Member
    Posted 5 months ago #

    chappie: do you have a link to an example? I don't think I've ever seen a menu do that.

    And I'm not sure if I'd want it to...because you can either: A.) keep the submenu page item highlighted in the submenu to show the viewer where they are, or B.) make the submenu disappear when triggering another submenu on mouseover.

    With this structure you can't have both, or the submenus will overlap each other.

    Also, I have no idea what I'm doing. I can steal a line of code here or there and get lucky sometimes, but how it works and what it means is totally beyond me. Perhaps a jQuery programmer could help you get where you want to go.

  30. scourge666
    Member
    Posted 5 months ago #

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

Reply »

You must log in to post.

About this Theme

About this Topic

Tags

No tags yet.