Open the topbar widgets with a menu item

[macvink]

How do I open the collapsed topbar with a menu item? Case: I have login widgets in my topbar. In the menu there is a menu item called “PORTAL”. When the visitor clicks this item, I want to open the topbar widgets. Any suggestions? See: https://carrousel.nl

[jade]

Hello Vink,

Please add a class to the menu item. To do this, please go to WP Admin > Appearance > Menus then click on the Screen Options link on the top right part of the page.

Once click, you should see a collapsed panel. Make sure that CSS Classes is active under Show advanced menu properties.

Go to your menu items and you should see the CSS Classes (optional) field under the menu item settings:

Add a class to the menu item that you want to target. In this example, we will use the class open-header-widget to the menu item.

Once the menu is saved, go to X > Theme Options > JS:

(function($){

	$('.open-header-widget').on( 'click', function(e) {
	  e.preventDefault();
      $('#x-btn-widgetbar').trigger('click');
    });

})(jQuery);

If you want to use other elements to trigger the topbar widget open, you can simply add the class open-header-widget to the elements.

Kindly note that since this is a custom code that changes the default behavior/display of the theme, you will be responsible to maintain or update the code in case you require further changes or if the code stops working in future updates. If you are uncertain how to proceed, it would be best to get in touch with a developer.

Hope this helps.