Support » Fixing WordPress » How do you make the search icon clickable?

  • Hi,

    I is there some code I can add to make the magnifying glass a clickable element?
    Or if anyone can recommend a search plugin that will replace the search with a clickable icon?

    People who use the website on a desktop think that the search doesn’t work because they are trying to click the icon, as opposed to pressing enter.

    just to be really clear – the search icon is on the top bar and is clickable. it opens the search bar. This icon on the search bar is what I’m referring to and is non-clickable.

    Any help would be appreciated – thanks!

    The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)
  • The real answer is you don’t. It’s a CSS Pseudo Element https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements

    But you can fake it with the CSS below:

    .search-form input[type="submit"] {
        display: block;
        width: 40px;
        font-size: 0;
        position: absolute;
        top: 0;
        right: 0;
        z-index: 10;
        opacity: 0;
    }

    What that does is takes the actual submit button, positions it over the icon, and makes it hidden. So when you mouse over, you get the pointer and it is clickable so it looks like you are clicking the magnifying glass but you are really clicking the search button.

    If it doesn’t work you might need to add !important to the rules above to override your theme’s CSS.

Viewing 1 replies (of 1 total)
  • You must be logged in to reply to this topic.