Navigation Menu in block

@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 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! :D

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.

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.

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

You're welcome, Gerrit!