Please note, that this qualifies as a customization request, so I cannot guarantee any “perfect” solution. Placing the shortcode and implementing custom codes are developer tasks, so we cannot guarantee anything.
1. The overlap issue is caused by the incorrect z-index value on the navigation seach element, which is part of the theme itself. Try this custom CSS, it should work:
.navigation-search {
z-index: 9999999999;
}2. As for the error 400 issue, I switched to the custom ajax handler option. If you clear the cache it should be all right now.