Add Search to Header

Hi,

Having trouble knowing how I can add the search bar to my header and move the menu bar down. Searched through the discussion board but not seeing anything like this.


Thanks

Kelly

Comments

  • Hi 
    Kindly tell us exact place on the header bar would you want to add search bar . 

    Your query is a part layout customization for this firstly I would like to suggest you to create child theme . 
    To create child theme refer this link . 

    Create child theme and tell me . 

    Thanks 
  • I want to add the search above the menu bar and move the menu bar down.

    Here is a link to my site so you can see the menu bar currently


  • edited November 2017
  • Hi 
    For this follow  the given below instruction . 

    Step 1 

    1 Find the header.php file located in your theme folder . 

    2 Open it and replace the code of it with the code mention in this link . 

    Step 2 

    Go to appearance >> customize >> Additional css  >>  Add the below css code inside the custom css box . 

    div#search-4 {
        float: right;
        margin-top: 10px;
    }


    Step 3 

    Then go to Appearance >> widget >> Find the Home page additional widget area  and  add search widget into this area . 
    See the snapshot http://prntscr.com/hdb5d6

    Thanks 
    Akhilesh 
  • edited November 2017
    This is what I get. It seems to insert it to the left and not above the menu and it has enlarged the header. Also the search  is huge.

  • edited November 2017
    Hi 
    Pls send me the snapshot  by indicating the area of the header section  on which place  you want to show search bar . 

    Thanks 
  • Below is a document as requested. I hope it is clear. Also the search box is huge and I would like it to be a basic search box (horizontal) Should a find a widget to get a different search box?
    would like.docx
    669K
  • Hi 
    To reduce header height . 
    Lets take step by step kindly upload logo image  having height 60  px  size . 
    Right now you uploaded logo  image having height 195px . 

    After uploading suggested height image you will get the output like the snapshot . 

    Thanks 
  • Yes that is what was happening no matter the image size it was squishing. I found info on this board on how to change this in the function.php. I changed it and now my logo is perfect. I am ok with that spacing. At that point I just want to add a search box in the right corner and drop the menu down without any more resizing of the header. 
  • Hi 
    We can add  search bar on the top right corner  like the snapshot http://prntscr.com/hdli7l ;
    But its not possible without increasing height of the header  . 
    If we add additional content it will take space and increase the height of the header . 
    I will show look like the snapshot on your website  http://prntscr.com/hdlj2u ;

    Thanks 
    Akhilesh 

  • What I am trying not to have is so much white space.

    I Like the first version best http://prntscr.com/hdli7l  

    Not sure why it would be different with my logo. Why the menu bar doesn't drop down and creates more space with my logo. Don't want to have so much white space but don't want a squishy logo either.
  • Checking in as I have seen no response since November 21st. 

    I would like the header to look like your first link but with my Logo if possible. Is this possible.?
  • Hi 
    To add search button on the top right corner For this follow  the given below instruction . 

    Step 1 

    1 Find the header.php file located in your theme folder . 

    2 Open it and replace the code of it with the code mention in this link 

    Step 2 Go to appearance >> customize >> Additional css  >>  Add the below css code inside the custom css box . 

    div#right_search .widget_search {
        float: right;
        margin-bottom: 0px;
    }

    Step 3 
    Then go to Appearance >> widget >> Find the Home page additional widget area  and  add search widget into this area . 
    See the snapshot http://prntscr.com/hdb5d6

    Thanks 
    Akhilesh 
  • Thanks I will take this as a solution. 

    I will play with it a bit. It does add the search box. I think if I play with sizing and padding in css I may be able to make it work with my Logo. 

    If I want a smaller search box is that possible? Such a big box and button.

    Thank for your patience.

    Kelly
Sign In or Register to comment.