How can add a search function to my top hearder right area

Hello, i want to add a search function to top header right area, i know widget can do. But if i do it throught widget, the top head bar will become very wide(the blue area height will enlarge 3 times). 

What i want is like this, http://demo.sharkthemes.com/intl-business/ ;   when i click the search, it will give me a drop down text box, and with yellow edge surround

Thank you.
Tagged:

Comments

  • Hi woolars

    Kindly add the search widget in top header right sidebar in your site and let me know.

    We will give you some css code for mange search widget.

    Thanks
  • edited August 2018
    hi prajapati,

    Plz read my first question 
    I don't want the search from widget, i want this type: http://demo.sharkthemes.com/intl-business/ 
    with a small Magnifying glass icon, and will have a drop down text when after you click the icon.

    Thanks, plz view the site i give
  • Hi woolars

    Its a part of layout customization, Required much code customization. It's Beyond the scope of our support.

    For this, you can use the suitable Wordpress search widget plugin in https://wordpress.org/plugins/

    Let me know for any confusion.

    Thanks
  • hi Prajapati, 

    Thank you for reply. 

    If i use the search from widget. how can i make the height normal? What css i need and how to edit it?
    Thanks
  • edited August 2018
    Hi woolars

    Ok we will give you css code for manage search widget kindly drag the search widget in top header right area sidebar and share your site url. So we assist you better.

    Thanks
  • edited August 2018
    Hello prajapati,


    1. Plz check the top blue area, the height is too high after i add a SEARCH.  (note: i am using child theme)
    2. When i move the mouse onto the word Search (the word under the search box), can i have a color? (for example, when i move mouth on to Search, the word will becom Yellow color)


    Plz help, thank you
  • edited August 2018
    Hi woolars

    Kindly add the below css code in Additional css box.

    For this Go to Appearance >> Customizer >> Additional css box.

    .top-header-widget .widget input[type="text"], .top-header-widget .widget textarea {
        width: 70% !important;
    }
    .top-header-widget .widget_search {
        padding: 8px 46px 0px !important;
    }
    input:focus::placeholder {
        color: yellow !important;
    }

    Let me know did it work.

    Thanks
  • edited August 2018
    Thank you for your kind support prajapati, really appreciate. 

    However, I want the second Search to be yellow after i move mouse onto it. Not the first Search. 
    Plz check the attachment.  (when i put my mouse on this word, i want it cange go yellow, yellow words or yellow background.)

    Thank you and waiting for your new css code.

    1.png
    3K
  • Hi woolars

    Remove the below css code from I suggested.

    input:focus::placeholder {
        color: yellow !important;
    }

    And you can add this css code.

    .top-header-widget .widget_search input[type="submit"]:hover{color:yellow !important;}

    Let me know did it work.

    Thanks
  • .top-header-widget .widget input[type="text"], .top-header-widget .widget textarea {
        width: 70% !important;
    }
    .top-header-widget .widget_search {
        padding: 8px 46px 0px !important;
    }
    .top-header-widget .widget_search input[type="submit"]:hover{color:yellow !important;}

    Thank you so much, this code works.   I past it here in case other users may needs.
  • Hi woolars

    Glad to know it worked for you. If you like our theme and help kindly share your feedback: 


    We highly appreciate if you kindly take a few minutes to give us your feedback.

    If you have any query, please let me know.

    Thanks
This discussion has been closed.