WordPress.org

Support

Support » Themes and Templates » [Resolved] Adding a horizontal submenu/secondary menu?

[Resolved] Adding a horizontal submenu/secondary menu?

  • 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

Viewing 15 replies - 1 through 15 (of 30 total)
  • Theme Author nikeo

    @nikeo

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

    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.

    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.

    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 😛

    Regards,
    Johanna

    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.

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

    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 …

    “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 …

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

    Theme Author nikeo

    @nikeo

    @acub : nice !

    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

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

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

    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?

    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?

Viewing 15 replies - 1 through 15 (of 30 total)
  • The topic ‘[Resolved] Adding a horizontal submenu/secondary menu?’ is closed to new replies.