Search Box in Header below logo above Nav Menu

Hi -

I added a search box to the header of the free Sydney theme following the instructions from another post in this forum. The problem is the search box is at the right side of the top Nav Menu and I want to center the search box below the logo but above the Nav Menu.

My site is https://roooadtrip.com/

Thank you in advance :slight_smile:

Jon

Hello Jon,

To move the existing custom search form below siteโ€™s main logo, try doing the below steps:

  1. Install and activate the TC Custom JavaScript plugin
  2. Go To Appearance > Custom JavaScript
  3. Paste the following code into the provided box
    ;(function($) {
      'use strict'

      $('.top-search-menu').remove().clone().appendTo('.site-header .col-md-4').wrap('<div class="head-search" />');

    })(jQuery);
  1. Update
  2. To add more top/bottom spaces, add this CSS code Appearance > Customize > Additional CSS from dashboard.
    .head-search {
      margin-top: 10px;
      margin-bottom: 10px;
    }

Regards,
Kharis