Hey there Daniel,
Hope you’re well! ??
First, Use child themes for any customisation you will make. Read more about it here: https://codex.www.ads-software.com/Child_Themes
-Comment out temporarily all custom css code you done because it might cause to get a different result.
-Add the code below to your child theme’s function.php. It adds a search form in the menu.
add_filter('wp_nav_menu_items','add_search_box_to_menu', 10, 2);
function add_search_box_to_menu( $items, $args ) {
if( $args->theme_location == 'primary_nav' )
return $items . get_search_form();
return $items;
}
-Add this code to child theme’s style.css so that the search form will be aligned with the menu:
#header #searchform {
margin-top: 10px
}
-Create a file named ‘sidebar-header.php’ in your child theme folder then put the code you will find here inside that file – this removes the default search form that is located beside your site title.
-To change the search bar: create a folder named ‘images’ then put your custom search bar.
Put this code in your style.css ( of child theme ):
#header input#s {
background: rgba(0, 0, 0, .1) url(images/nameofcustombar.png) right center no-repeat;
}
change the ‘nameofcustombar’ to the exact name of your image. ??
Hope it helps! ??
Take care,
Calvin