Align css of custom search bar in line with menu bar

Could you help me to perfectly align the google custom search bar with the menu bar as it is appearing below the menu bar in sydney theme!
I have a Sydney child theme!

I have used this code
add_filter( 'wp_nav_menu_items', 'sydney_child_add_top_search_menu', 10, 2 ); function sydney_child_add_top_search_menu( $items, $args ) { if ($args->theme_location == 'primary') { $items .= '<li class="top-search-menu">'.get_search_form(false).'</li>'; return $items; } }

I have also uploaded a search form with javascript google custom search code in searchform.php
to sydney child theme!

Thank you.

Hello there,

Does it already appear on your site? Please share a link of it, so I can exactly the correct CSS code to suggest.


Link to my site

Hello there,

Thank you for sharing. Try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

    @media only screen and (min-width: 1025px) {
      .site-header .col-md-4 {
        width: 21%;
      .site-header .col-md-8 {
        width: 79%;
      .site-header #mainnav {
        float: left;
      .top-search-menu {
        width: 200px;
        overflow: visible;

    @media only screen and (min-width: 1025px) and (max-width: 1160px) {
      div.gsc-control-searchbox-only {
        width: 280px !important;


Thanks a lot Kharis!
But now the menu elements
(#maninav li a ) are not in line with the site header and searchbar, they seem to be a little upwards.
I tried css for this but, then it is overlapping with page title.
Also could you help me join the search icon to the input search box as I do not want the gap!

Thanks a lot!

Hey Kharis,
The above #mainnav li a is done, figured it out.

Thanks for all the support!!!

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.