Language switcher for sticky navigation on mobile with MultilingualPress

Hi there,

Not sure how this will behave, but you can try adding this PHP Snippet:

function db_menu_bar_items_widget_area() {

	register_sidebar( array(
		'name'          => 'Menu Bar Widget',
		'id'            => 'menu_bar_widget',
		'before_widget' => '<div>',
		'after_widget'  => '</div>',
	) );

}
add_action( 'widgets_init', 'db_menu_bar_items_widget_area' );

add_action('generate_menu_bar_items', function(){
	if ( is_active_sidebar( 'menu_bar_widget' ) ) : ?>
		<div id="primary-sidebar" class="menu-sidebar widget-area" role="complementary">
			<?php dynamic_sidebar( 'menu_bar_widget' ); ?>
		</div>
	<?php endif;
});

That will create a new Widget Area called: Menu Bar Widget.
Which is hooked into the generate_menu_bar_items hook, which is displayed on Desktop and Mobile navigations to the side of the Search / Hamburger icons.

Thanks David!

After adding that Snippet the widget area is showing up in the Widgets tab and I can add a navigation widget with the language switcher menu. So far so good!

But I'm still having a hard time getting it to appear on the site.
I'm trying to use a hook element so I can get the menu bar widget to only show up on mobile, but I can't seem to find the generate_menu_bar_items hook.

Am I pursuing this the wrong way, trying to put a widget shortcode in a hook element for mobile? I'd thought that the Widget Shortcode plugin would allow me to use a widget wherever I could use a shortcode, but maybe I'm wrong about that.

What I'm hoping to accomplish is for the language switcher (that is, a menu in a navigation widget) to show up here:

Thanks!
Chris.

Hi Chris,

I see you're using mobile header.

You can try hooking in the shortcode through generate_inside_mobile_header hook with hook priority value set more than 5 so it appears after the logo (the logo is hooked w/ priority value of 5).

Thanks Elvin!

Oddly, I still can't get it to work…

I've set up the hook like this (with display rules set to entire site):

And the widget it's referring to is set up like this:

It seems that the widget shortcode works, because I can get it to display (and function as expected) on a test page in a Widget Shortcode block:

https://nishigawakobo.staging.tempurl.host/test-page/

That's on a staging site, so I've provided user/password details in the private info.

I even tried installing the classic widget editor plugin just in case, but with no success.

Am I doing something wrong in the hook?

Thanks!
Chris.

The code i provided here should do all the work for you. If you can revert to just adding that code, no other hooks or shortcodes etc.

Then in Menu Bar Widget area just add a text widget with some text. Lets see if that appears where in the right place.

Thanks David!

I added a simple line of text to the Menu Bar Widget to test it:

But it's not showing up on the site.

The problem I'm having is that although Menu Bar Widget is listed in the list of widget areas, the customizer (live preview) does not report it as supported by the theme (GeneratePress child theme). This is an example from the landing page (other page/post types don't show it as available either):

Do I need some additional code to add the widget area to the theme? I'm thinking that the second part of the code you provided should have done the trick, but I'm still not seeing it…

Sorry again if I'm missing something obvious.
Chris.

Keep the code i provided.
And try adding the snippet here to disable the Block Widgets:

https://docs.generatepress.com/article/disable-the-block-editor-in-widgets/

Thanks David!

Disabling the Block Widgets didn't help, but I went back to the reference for generate_menu_bar_items and watched the video, and noted that the site structure has to be set to flexbox for it to work, and for some reason mine was still set to float. That's done the trick! Now the Menu Bar Widget is showing up as expected. Great!

Except it still isn't showing up on mobile… Which is really weird. As it says:

Content added there will automatically display in the navigation and mobile header.

So it looks like I've got a setting somewhere that's preventing generate_menu_bar_items from showing up on mobile.

I tried turning off the WooCommerce cart icon, but that didn't help. Use navigation as header and mobile header on/off don't seem to have any effect either.

Any idea what might be getting in the way here?

Thanks again,
Chris.

PS: The behaviour is the same with a hook element, which is why I think something is getting in the way of generate_menu_bar_items on mobile.

Aah yes, sorry i should have checked that.

Is the code still added to the staging site ?

No worries! I should've checked the documentation earlier…

The code is active on the staging site, and I've made an admin account for testing in case it would be helpful to take a closer look at how things are configured. Credentials are in the private info area.

Thanks!
Chris.

Aha - so you need this CSS:

#mobile-header ul#menu-lang-switch {
    display: block !important;
}

As on mobile the top level ULs are hidden

Beautiful! That's got it! Thank you!

Now the only thing that's left is to style that particular widget area to match the other navigation menu items. I'm a bit confused about which css class I should be picking up here – would it be main-nav or menu sf-menu?

Thanks again!
Chris.

I checked the staging site to look for the classes. But didn't see it displayed on the front end? Did you make any changes ?

Sorry – I think I was referring to the wrong things.

My idea is to make the language switcher styling match the WooCommerce cart styling (particularly in terms of hover styling) because they're right next to each other.

I'm looking at:

<div class="menu-bar-items">
<span class="menu-bar-item wc-menu-item  ">
<div id="primary-sidebar" class="menu-sidebar widget-area" role="complementary">

…and hoping to have the menu-sidebar class match the menu-bar-item class.

I hope that makes sense… And that it isn't a crazy idea! 😅

Thanks!