How to remove search icon / button

  • Resolved coro111

    (@coro111)


    4 years, 11 months ago

    Is it not possible to remove the search icon in some themes?
    I have tried all the following with no luck..

    .site-header .header-bottom-right .search-icon{
  display: none;
}

.topsearch {
display: none;
}

.toggle-wrapper.search-toggle-wrapper {
    display: none;
}

ul.main-menu li.header-search {
display: none;
}

/* hiding the search icon */
.header-search-wrapper {
  display: none;
}
    • This topic was modified 4 years, 11 months ago by coro111.
Viewing 5 replies - 1 through 5 (of 5 total)

  • Hi @coro111

    I’d recommend just setting the opacity to 0 so you don’t alter the height of the header by setting it to display: none;.

    Either way you can do so with the following CSS:

    #header__search-toggle {
    opacity: 0;
}

    or

    #header__search-toggle {
    display: none;
}
    Thread Starter coro111

    (@coro111)

    Wow, they both worked, thank you! Finally! I had spent a couple of hours on that.

    The header height did not seem to change using “display: none”

    Why did I find so many different code suggestions for doing that and none of them worked? Are they all unique to specific themes or something?

    @coro111

    Each theme has their own custom class (or ID) that they’ve added to that element (if it exists at all, not all themes have a search icon there). Ours is unique to the Go theme.

    In future, it’s simple to find the proper CSS class or ID by right clicking the element and selecting ‘Inspect’ or ‘Inspect Element’. You’ll see the CSS class names or the element ID in your browser inspector.

    Evan

    Thread Starter coro111

    (@coro111)

    Thanks Evan, that was the information I didn’t know what or how to google for previously. Looks like I need to read up on CSS basics!

    Perfect, worked, thank you Evan.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘How to remove search icon / button’ is closed to new replies.