[Resolved] Navigation Menu in block

[Aaron]

@Elvin name is only the attributes name for the shortcode usage. I don’t see why that’s wrong. Actually, it uses menu parameter.

@Thomas, I have not tested it, but i think something like this should work:

/**
 * GeneratePress Menu Shortcode
 * Usage: [addmenu name="Primary Menu" aria-label="Primary Menu Label" ]
*/
function akdev_menu_shortcode($attr){
    ob_start();
    // Start your PHP below
    $args = shortcode_atts([
        'name'  => '',
        'aria-label' => '',
        ], $attr);
 
    wp_nav_menu([
        'menu'             => $args['name'],
        'container' => 'nav',
        'container_aria_label' => $args['aria-label'],
        'container_class' => 'menu-'. $args['name'] .'-container',
        'container_id' => $args['name'].'-menu-shortcode',
        'menu_class' => '',
        'fallback_cb' => 'generate_menu_fallback',
        'items_wrap' => '<ul id="%1$s" class="%2$s ' . join( ' ', generate_get_element_classes( 'menu' ) ) . '">%3$s</ul>',
        ]);
    // End your PHP above
    return ob_get_clean();
}
add_shortcode('addmenu', 'akdev_menu_shortcode');

[Elvin]

@Elvin name is only the attributes name for the shortcode usage. I don’t see why that’s wrong. Actually, it uses menu parameter.

ah yeah, that’s right. I was focused on naming appropriation. lol. and looking back, I guess “name” is fine.

But yeah, it doesn’t matter what the $attr key name is as long as it’s correctly applied to the wp_nav_menu() args.

Thanks for providing a snippet write-up! 😀

[Gerrit]

Hi, I am a complete novice but trying my best with Generate Press, and the Generate Press Made Easy course. I have Generate Press Pro and Generate Blocks Pro. I’m trying to recreate the header from my old website (build with Flatsome).

I have a few issues, but the main issue now is to add the Primary menu to the Bottom Header like on the original site:
https://www.shopamerica.se

I added an Element > Block > and set the hook to After_Header. I added the background color. I then added the snippet to WpCodeBox:

<?php 
add_shortcode('portable_menu',function(){
ob_start();
    // Start your PHP below
$args = shortcode_atts([
        'name'  => '',
        'aria-label' => '',
        ], $attr);
 
    wp_nav_menu([
        'menu'             => $args['name'],
        'container' => 'nav',
        'container_aria_label' => $args['aria-label'],
        'container_class' => 'menu-'. $args['name'] .'-container',
        'container_id' => $args['name'].'-menu-shortcode',
        'menu_class' => '',
        'fallback_cb' => 'generate_menu_fallback',
        'items_wrap' => '<ul id="%1$s" class="%2$s ' . join( ' ', generate_get_element_classes( 'menu' ) ) . '">%3$s</ul>',
        ]);
	// End your PHP above
return ob_get_clean();
});

Then I added the CSS found in this article.

ul.portable-nav-menu.menu.sf-menu li:not(last-child) {
    margin-left: 15px;
}
ul.portable-nav-menu.menu.sf-menu {
    list-style: none;
    display: flex;
}

But what I get is a list, at least it’s showing something. But I’m not quite there yet. Any help would be greatly appreciated. Thank you.

[Fernando]

Hi Gerrit,

You shouldn’t need any code for that. You just need to go to Appearance > Customize > Layout > Primary Navigation, and set the Navigation Location to Below Header. Reference: https://docs.generatepress.com/article/navigation-location/

If you’re referring to something else, let us know.

[Gerrit]

Thank you! That was precisely what I was looking for.

[Fernando]

You’re welcome, Gerrit!

[Author]

Posts