Add search to navigation and show/hide it

[Sergio_7]

Hello everyone,

I would like to know how I to integrate the search function for Webhelp-Output in the same way as on the website:
https://www.oxygenxml.com/

The search should also be expanded when the loupe is clicked and the navigation should be hidden.

Many thanks in advance!

search_active.PNG

search_inactive.PNG

[ionela]

Hi,

To move the Search component from its default location to the header section of the output page, you need to use an XSLT customization. We have a sample publishing template that might be very useful as a starting point:
Git - Search Input in Page Header


For the second requirement, to have the search expanded when the loupe is clicked and the navigation bar hidden, you need to develop a JavaScript customization in order to achieve this for the WebHelp output:
How to Insert Custom HTML Content
How to Use CSS Styling to Customize the Output


I hope this helps.

Regards,
Ionela