Dropdown menu not showing in Header Top Right location on Wedge theme

Hi Paul,

I am sorry to hear about the problems with your menus, I know how frustrating it can be when something doesn’t work as expected.

Unfortunately the dropdown menu functionality only works for the menu assigned to the Primary Menu location.  The other menu locations in our Inspirations themes were intended to be used for smaller submenus and are designed to show all items as expanded inline lists.

The quickest solution is to find an Inspirations theme that has the header design you want and switch to that.  However I have reached out to our development team to see if there is any kind of custom function that we can create that will add the dropdown features to your secondary menu location.

Thank you for your understanding and I hope to hear back from them soon.

Hello Paul,

Thanks for the interesting question, I agree that this type of menu flexibility would be a great addition to the Wedge Theme, and I’ll be following up with a feature request for you.

The “Header Upper Right” menu in Wedge was originally designed as a social media menu, which would have icons representing your various social networks, and not have a drop-down style parent-child menu item relationship.

That being said, it is possible to get this menu to behave the way you need it to, but it will require a little more advanced work to modify the configuration within the BoldGrid Theme Framework. You can do this either in a child theme’s functions.php file, or by using the Code Snippets plugin to create a filter. Paste this function into a new code snippet or your functions.php file:

function my_custom_theme_configs( $boldgrid_framework_configs ) {
    $boldgrid_framework_configs['menu']['prototype']['social']['walker'] = new wp_bootstrap_navwalker();
    $boldgrid_framework_configs['menu']['prototype']['social']['fallback_cb'] = 'wp_bootstrap_navwalker::fallback';
    $boldgrid_framework_configs['menu']['prototype']['social']['container_class'] .= ' collapse navbar-collapse navbar-default';
    $boldgrid_framework_configs['menu']['prototype']['social']['menu_class'] .= ' nav navbar-nav';
    $boldgrid_framework_configs['menu']['prototype']['social']['depth'] = 0;

    return $boldgrid_framework_configs;
}
add_filter( 'boldgrid_theme_framework_config', 'my_custom_theme_configs');

If you choose to use Code Snippets, I’ve attached a file that you can import using the Code Snippets -> Import tool. I hope this helps!
custom-theme-configs.code-snippets.json

• This reply was modified 3 years, 11 months ago by Jesse Owens. Reason: add lightbox to gif
• This reply was modified 3 years, 11 months ago by Jesse Owens.
• This reply was modified 1 year, 5 months ago by BoldGrid Support.

Hi Paul!

Thanks for the update, I’m sorry I forgot to test it out on mobile. Try this snippet:

function my_custom_theme_configs( $boldgrid_framework_configs ) {
    $boldgrid_framework_configs['menu']['prototype']['social']['walker'] = new wp_bootstrap_navwalker();
    $boldgrid_framework_configs['menu']['prototype']['social']['fallback_cb'] = 'wp_bootstrap_navwalker::fallback';
    $boldgrid_framework_configs['menu']['prototype']['social']['container_id'] = 'primary-navbar';
    $boldgrid_framework_configs['menu']['prototype']['social']['container_class'] = 'navbar-collapse primary-menu';
    $boldgrid_framework_configs['menu']['prototype']['container'] = 'div';
    $boldgrid_framework_configs['menu']['prototype']['social']['menu_class'] = 'nav navbar-nav';
    $boldgrid_framework_configs['menu']['prototype']['social']['depth'] = 2;
    $boldgrid_framework_configs['menu']['prototype']['social']['items_wrap'] = '<ul id="%1$s" class="%2$s">%3$s</ul>';

    return $boldgrid_framework_configs;
}
add_filter( 'boldgrid_theme_framework_config', 'my_custom_theme_configs');

Hi Paul-
The code I gave you shouldn’t have caused that warning to show up, at least it doesn’t when I try it out in a few testing environments. Either way, I recommend the following settings in your wp-config.php file to avoid displaying errors to your visitors:

define( 'WP_DEBUG', true );
define( 'WP_DEBUG_LOG', true );
define( 'WP_DEBUG_DISPLAY', false );
@ini_set( 'display_errors', 0 );

Paste these lines just above this line in your wp-config.php file:

/* That's all, stop editing! Happy blogging. */

Hi Paul,

Thanks for writing back. I consulted with the developers and they let me know I might have been going down the wrong path. You’re right that the JavaScript to turn the menu into the “Hamburger” (box with the lines in it) only works if we use the Primary Menu.

So, rather than trying to turn the Social menu into a new copy of the primary menu, use this snippet instead to swap their positions:

function my_custom_theme_configs( $boldgrid_framework_configs ) {    
    $boldgrid_framework_configs['template']['locations']['header'] = array(
        '1' => array( '[menu]secondary' ),
        '5' => array( '[widget]boldgrid-widget-1' ),
        '6' => array( '[action]boldgrid_site_identity' ),
        '7' => array( '[action]boldgrid_primary_navigation' ),
        '11' => array( '[menu]social' ),
    );
    $boldgrid_framework_configs['menu']['locations']['social'] = 'Header Lower Right'; 
    return $boldgrid_framework_configs;
}
add_filter( 'boldgrid_theme_framework_config', 'my_custom_theme_configs', 21);

After updating the Snippet, you’ll need to go back to Customize -> Menus and switch your menu location back to Primary. You’ll notice while you’re in there that we renamed the Social menu spot to “Header Lower Right” so that you’ll remember we switched it in the future.

I hope this one accomplishes everything you’re looking for Paul!