Reply To: Unable to fit search into top navigation menu

[Ernest MarcinkoKeymaster]

Hi Brook,

Thank you for the proper details, it makes my work much easier. I’m not able to log in to the back-end though, I get a sucury security restriction screen.

I see you either have some custom CSS there already, or the compact layout mode is enabled – in any case, please remove that it’s not correct, and turn off the compact mode if enabled. The problem with the height is that the menu items are only a few pixels high (text), and the rest of the menu is padding and margin. So adding a complex element (like a search block) will increase it’s inline height and add the margin and padding as normal.

The best and possibly the easiest solution is to set the parent menu element of the search to a ‘relative’ position, and the search bar to a forced ‘absolute position’. This results the search to be removed from the document flow, therefore accounted as ‘0’ pixels high:

#menu-item-10030 {
   position: relative;
}

#ajaxsearchpro1_1, #ajaxsearchpro1_2, div.ajaxsearchpro[id*="ajaxsearchpro1_"] {
    position: absolute;
    top: 28px;
    right: auto;
    width: auto;
}

..and that’s it. I believe this should position it correctly.

I’ve noticed something more problematic though. It seems that the menu is automatically adding some HTML elements to the search source code, altering the plugin structure, and causing potential issues: https://i.imgur.com/bYDoUxE.png

That might also be visually fixable:

.wpdreams_asp_sc-1>a {
    display: flex !important;
}

.wpdreams_asp_sc-1 .probox {
    width: 100% !important;
}

This results in the following layout on my screen: https://i.imgur.com/5vpKYkW.png

Please note that menus are usually not made to hold interactive elements (like search bars, sliders etc..), but for simple texts and images. That alteration in the search source might be done via a filter, which may be possible to disable via a custom code. If you want, you can ask the theme author how to remove or de-activate it.
I rather suggest adding the plugin shortcode directly to the theme files, you can also ask the theme author, which one to edit for that – and I gladly help you with the placement.

I cannot guarantee that my suggestion will work in all cases, as implementation qualifies as a customization request, nevertheless I still hope that I was able to help.

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)