In reply to your thread in the css forum it is more appropriate to post here as it requires some help with the JS again.
I have uploaded your whole working page into the codepen and inserted the search code.
It is basically working but there are errors showing in the console and because you have two drop downs on this page there is a behaviour problem.
When the menu is open it needs a) to be able to be closed by clicking the ‘more Info’ button again or indeed if clicking the other menu item (info) the search dropdown should close. (Both a and b refer to before the search input has been activated as that part is working ok).
Hopefully this is something that @rpg_digital will have an idea how to solve.
Note regarding the html and css I added two classes to the html to make the css and search work.
I added sdrop here.
<ul class="navbar-nav ml-auto sdrop">
and a nav-item-with-search class here.
<li class="nav-item dropdown nav-item-with-search">
Note that you should use css to change link colors on hover (as in my example) and not js inline click handlers 