Referring to : https://kriesi.at/support/topic/styling-search-bar-on-main-page-avia_search/#post-1327689
your search menu-item gets out of line if you shrink your header; but that is not the worst.
If you like to enter in the input field something and want to overwrite or correct the input the link on your menu-item search is disturbing. ( try to correct the text you put in the input field.)
If you like to have it with more usability put this into your child-theme functions.php:
function remove_href_from_search_input(){
?>
<script type="text/javascript">
(function($) {
$(document).ready(function(){
$('#menu-item-7484 > a').removeAttr("href");
});
$('#header').on('click', '.av-main-nav-wrap', function() {
$('#av-burger-menu-ul #menu-item-7484 > a:first-of-type').removeAttr("href");
});
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'remove_href_from_search_input');
and for your quick css:
#menu-item-7484 > a {
display: flex;
flex-flow: column nowrap;
}
#menu-item-7484 > a > .avia-menu-text {
position: relative;
top: calc(50% - 21px)
}
#menu-item-7484 > a #searchform {
margin: 0 !important;
padding: 0 !important;
width: 300px; /*** only if you like to have the same width with ajax response ***/
}
#menu-item-7484 .ajax_search_response {
padding-top: 20px
}
Hey,
Thanks for your help!
I temporarily re-opened the other thread and informed @mussio506 about this thread :)
Best regards,
Yigit