How to put search bar on the left

This topic contains 10 replies, has 2 voices, and was last updated by  Vinod Dalvi 1 month ago.

  • Author
    Posts
  • #2354
    thfo
    Participant
    • Topics: 1
    • Replies: 5

    Hi,
    Thanks for this plugin! Could you please explain how I could make the search bar appear on the left of the icon (instead of the right) ā€“ and consequently make my menu slip to the left?
    Many thanks, best
    Thierry

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

    Hi Thierry,

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

    Could you please share me your site URL where it’s displaying so that i can help you to achieve it?

    Best regards,
    Vinod Dalvi

  • #2365
    thfo
    Participant
    • Topics: 1
    • Replies: 5
    This reply has been marked as private.
  • #2367
    Vinod Dalvi
    Keymaster
    • Topics: 0
    • Replies: 219

    I achieved it on your site by adding the below CSS code in the Custom CSS option of Add Search To Menu plugin settings.

    .site-header .astm-search-menu  .search-field {
        background-position: right;
        width: 30px;
        padding: 0 30px 0 0;
    }
    
    .site-header .astm-search-menu  .search-field:focus{
        width: -webkit-calc(100% - 42px);
        width: calc(100% - 42px);
    }
  • #2368
    thfo
    Participant
    • Topics: 1
    • Replies: 5

    Hi Vinod,

    So many thanks for your time, that’s great!! Perfect šŸ™‚
    All the best
    Thierry

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

    You are most welcome, Iā€™m glad I was able to help you in this matter. There is no obligation but by your kind words I wonder if I could trouble you to leave a review based on this experience here:

    https://wordpress.org/support/plugin/add-search-to-menu/reviews/?filter=5

    Iā€™d really appreciate that. šŸ™‚

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

  • #2373
    thfo
    Participant
    • Topics: 1
    • Replies: 5

    Hi Vinod,

    Yes of course! I just did it, under the name of thfofr. I’m glad to contribute to its good rating, given your excellent work and support.

    Thanks again,
    All the best,
    Thierry

  • #2376
    thfo
    Participant
    • Topics: 1
    • Replies: 5

    Hi Vinod,

    Sorry to come back again but I still have a small question. I designed properly the search icon and search field (please note that I integrated your css options in my own stylesheet, to avoid errors). But the magnifyer still has a vertical position offset, between its normal position and its clicked position when the search field is unfolded. I don’t see where I can act on this ?

    Many thanks again, best
    Thierry

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

    Thank you for providing your valuable feedback šŸ™‚

    To resolve magnifier icon vertical position issue please try using below custom CSS code.

    .astm-search-menu.default form {
        margin-top: 0;
    }
    
    .site-header .astm-search-menu  .search-field:focus{
            margin-top: 6px;
    }
  • #2381
    thfo
    Participant
    • Topics: 1
    • Replies: 5

    Hi Vinod,

    You’re welcome šŸ™‚

    And yeah, it works for the magnifier, it’s perfect! Many thanks again, six stars šŸ˜‰
    By the way I learnt to better manipulate these classes I barely knew.

    All the best
    Thierry

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

    You are always welcome here šŸ™‚

You must be logged in to reply to this topic.