Styling issues

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

  • Author
    Posts
  • #2754
    summerfeeling
    Participant
    • Topics: 1
    • Replies: 2

    Hi!

    our website is http://www.summerfeeling-bayreuth.de/ and we are currently working with your brilliant Add Search To Menu Plugin!
    We would like to remove the search icon (the small magnifier) that shows up when you use the search function (screenshot of the search icon that we want to remove is attached). We are using the sliding function of your plugin.

    Thank you so much for your time and help!
    Andi

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

    Hi Andi,

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

    You can remove this by adding the below CSS code in the Custom CSS option of Add Search To Menu plugin settings on the path Settings -> Add Search To Menu

    .astm-search-menu .search-form button {
        display: none;
    }

    Best regards,
    Vinod Dalvi

  • #2766
    summerfeeling
    Participant
    • Topics: 1
    • Replies: 2

    Hi Vinod,

    many thanks for your quick response! I was able to remove the icon.

    I would also like to adjust the width and height of the search box. I tried to achieve that by using CSS codes you’ve proposed to others but it didn’t work out.
    Furthermore, I would like to change the color of the magnifier on mobile devices to white. If I use the following CSS code the icon only appears white when visiting our website via a laptop or computer.

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

    Thank you very much and kind regards
    Andi

  • #2773
    Vinod Dalvi
    Keymaster
    • Topics: 0
    • Replies: 267

    You can achieve this using below custom CSS code.

    .astm-search-menu #s {
        height: 35px;
        width: 250px;
        float: right;
    }
    
    @media (max-width: 768px){
    li.astm-search-menu svg.search-icon path {
        fill: #fff;
    }
    }
  • #2782
    summerfeeling
    Participant
    • Topics: 1
    • Replies: 2

    Hi Vinod,

    thank you so much for your quick response! Now I am able to edit the size of the search box.

    Unfortunately, the search icon (magnifier) is still black when someone is visiting our website via a mobile device. Do you have any suggestions for me how I could fix this problem?

    Thanks in advance and kind regards,
    Andi

  • #2788
    Vinod Dalvi
    Keymaster
    • Topics: 0
    • Replies: 267

    Unfortunately, the search icon (magnifier) is still black when someone is visiting our website via a mobile device. Do you have any suggestions for me how I could fix this problem?

    Please try disabling plugin option “Display Search Form in Header on Mobile Devices” in the plugin settings as shown in the attached screenshot.

    Attachments:
    You must be logged in to view attached files.

You must be logged in to reply to this topic.