Move searchbar into menu

Hey there Daniel,

Hope you’re well! 🙂

First, Use child themes for any customisation you will make. Read more about it here: http://codex.ww.wp.xz.cn/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