Language picker on the Megamenu bar in Employee center Pro

[Janu sree]

Hello Community,

We have been working on displaying the Language picker on the Employee center Megamenu bar(Taxonomy). 

Somehow using the OOB widget(Portal Language Selector) we are able to get that on Header bar. This Link for the Language picker solution on portal header had helped us, but we are yet to complete the requirement by placing this at the right side(end) on the Menu bar. 

Please suggest how can we achieve this.

TIA,

Janu

[Jonathan Ting · Accepted solution]

@Janu sree I would really question if the benefits of having it on the megamenu bar is going to out weigh the level of customisation you're going to have to make to get this working.

To build the megamenu, the header widget calls the 'Employee Center Navigation' which is read-only, so this would need to be cloned. And cloning widgets means you need to check them with upgrades/patches, as they don't get flagged when the OOB widget is modified. You would also need to modify the server script on the header widget to point to the clone version of your 'Employee Center Navigation' widget. Once that is done, you can add the language picker widget to the clone version.

I was able to drop it under the div for  <!-- topic-based navigation menu --> and was able to get it to display like this

[Janu sree]

@Jonathan Ting - Great work, Thanks for the reply.

I've done modification in the html of cloned navigation widget, the language picker is displaying in megamenu, but it is not in alignment with the other menu items. and how can I make this to right corner(end)

Below is the place where I've placed the Html.

[Vegard S]

I would argue a better approach is to create a custom widget and then embed the OOTB header widget into it, and then add the language picker in your own widget. Without ever touching or cloning any OOTB widgets. 

[Jonathan Ting]

Chuck the widget in a div container and give it class="navigation-menu-item"

<div class="navigation-menu-item">
<!-- Language Selector Menu -->
<sp-widget widget="::data.langSelector"></sp-widget>
</div>