Customising the search bar

Tagged: 

This topic contains 5 replies, has 2 voices, and was last updated by  Vinod Dalvi 4 months, 2 weeks ago.

  • Author
    Posts
  • #1857
    lucies
    Participant
    • Topics: 1
    • Replies: 2

    Hi Vinod,

    your plug in works great !

    There are just few aesthetic things I would like to be changed and I wonder if you could help me out?

    1) The search bar is slotted right next to Contact – can it be shifted to the right side of the page?
    2) Can the outline of the box be done in narrow line – like the lines above and below my menu (the top line has shifted much higher with your plug in for some reason?)
    3) Can the inside text of the box just say “Search” instead of “To search type and hit enter” – it is too long and is it is not even visible

    here is my website: http://www.intuitionanddesign.com/

    I attach 2 images which will explain everything more clearly I hope 🙂

    Thank you,

    Lucie

    Attachments:
    You must be logged in to view attached files.
  • #1864
    Vinod Dalvi
    Keymaster
    • Topics: 0
    • Replies: 219

    Hi Lucie,

    I hope you are well today and thank you for your question.

    We can achieve this developing custom CSS code but for that please display search bar on your shared site.

    Also your second shared screenshot didn’t get uploaded due to large size so please reupload it after compressing it.

    Best regards,
    Vinod Dalvi

  • #1865
    lucies
    Participant
    • Topics: 1
    • Replies: 2

    Hi Vinod,

    I’m uploading the second image again. I’m activating the plug in now so that you can see what happens. Can you please let me know once you have seen it so that I can disconnect it again until we have solution.

    Thank you,

    Lucie

    Attachments:
    You must be logged in to view attached files.
  • #1867
    Vinod Dalvi
    Keymaster
    • Topics: 0
    • Replies: 219

    You can achieve it by using following custom CSS code as described on this page http://freewptp.com/how-to-use-custom-css-in-wordpress-site/

    
    #site-navigation li.search-menu form {
        position: absolute;
        right: -1500%;
        top: 0;
    }
    
    #site-navigation li.search-menu form input[type="search"] {
        border-width: 1px;
    }
    

    The plugin does not display search form text so you have to translate your theme to change it or you can use following plugin to change it.

    https://wordpress.org/plugins/say-what/#installation

  • #1890
    lucies
    Participant
    • Topics: 1
    • Replies: 2

    Thanks a lot Vinod, it works great !!!!

    My husband helped with little bit more customization so we managed to make the frame a bit more narrow to sit inside of my top menu + he made the lines thinner as well.

    Lucie

  • #1892
    Vinod Dalvi
    Keymaster
    • Topics: 0
    • Replies: 219

    You are most welcome here 🙂

    If i can be of any further assistance please don’t hesitate to ask.

You must be logged in to reply to this topic.