Archived topic
removing the search icon and search box from mobile header
5 replies · Started by qpaq on September 21, 2022
Hi,
I couldn't find a way to remove the search icon and box from the mobile header. I'm using Mega Menu and I was able to centre it on mobile devices, but I would like to remove the search option as the search box is too narrow to write anything in it.
Hello Qpaq,
Try adding this in Appearance > Customize > Additional CSS:
@media (max-width: 768px) {
span.menu-bar-item.search-item {
display:none;
}
}Thanks, Fernando but this didn't solve it.
I've tried the following as well (after inspecting it from the chrome developer's tab) but it didn't work either. However, when I write display:none on the inspector it works well. Couldn't resolve it even though I've cleared the caches.
@media (max-width: 768px) {
span.main-navigation .menu-bar-item.search-item{
display: none;
}}It's most likely not working because there's a syntax error somewhere in your Additional CSS. Try using http://csslint.net/ to check. Make the necessary corrections and test again.
Great, thank you. A rebrace was needed in one of the previous lines. That resolved the issue.
You're welcome Qpaq!
