Customize search text entry area

This topic contains 5 replies, has 2 voices, and was last updated by  Vinod Dalvi 1 week, 4 days ago.

  • Author
    Posts
  • #2331
    cancrime
    Participant
    • Topics: 1
    • Replies: 2

    Love the plugin, but I can’t figure out how to customize the text entry area of the search box. I’d like to make the box wider, both on desktop and on mobile. I’d also like to change the styling of the font for the word “Search” that appears in the text entry area.

    I’m using the dropdown option on the plugin, with the following CSS customizations implemented:

    .astm-search-menu svg.search-icon path {
    fill: #FFF;
    }

    .astm-search-menu .search-form input[type=”submit”]{
    display:none;
    }

    li.astm-search-menu {
    float: right;
    }

    @media (max-width: 768px){
    li.astm-search-menu {
    float: left;
    }
    }

  • #2332
    Vinod Dalvi
    Keymaster
    • Topics: 0
    • Replies: 171

    Hi Cancrime,

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

    We can achieve this developing custom CSS code.

    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

  • #2333
    cancrime
    Participant
    • Topics: 1
    • Replies: 2
    This reply has been marked as private.
  • #2334
    Vinod Dalvi
    Keymaster
    • Topics: 0
    • Replies: 171

    You can achieve this using below custom CSS code.

    
    li.astm-search-menu input.search-field {
        width: 200px;
        font-size: 15px;
        font-family: arial;
    }
    

    Please change the values in the above CSS code to whatever you want to.

  • #2335
    cancrime
    Participant
    • Topics: 1
    • Replies: 2
    This reply has been marked as private.
  • #2336
    Vinod Dalvi
    Keymaster
    • Topics: 0
    • Replies: 171
    This reply has been marked as private.

You must be logged in to reply to this topic.