How to Hide Search Icon in Divi Mobile Menu with CSS

by | Oct 21, 2018 | Guides

Have you ever tried hiding the default Divi search icon on mobile devices? Well, it’s easy. it’s something you can do under two minutes. You can achieve that by targeting the #et_top_search ID selector with responsive media query.
By default, Divi displays a search icon (a magnifying glass) in the header area on all devices. But in this guide we’ll show you how to hide it; first on mobile, then on desktop, and finally on all devices. Here we go.

How to Hide Divi Menu Search Icon on Mobile only

Here is a simple CSS snippet to achieve that:

@media only screen and ( max-width: 980px ) { #et_top_search { display:none; } }

This code can be added to the style.css file in your child theme or you can add it as Additional CSS in Theme Customizer.

How to Hide Divi Menu Search Icon on Desktop only

Use this CSS snippet:

@media only screen and (min-width : 981px) { #et_top_search { display:none; } }

 

How to Hide Divi Menu Search Icon on both Desktop and Mobile only

To achieve this remove the responsive media query from the CSS snippet above so that it looks like this:

#et_top_search { display:none; }
So that’s it.
If you found this guide helpful, kindly share with your friends using the social buttons below. Thanks.
Related Posts
Recommended Hosting
Get your Business online in 2019

Let’s make you a bespoke responsive business website. All our web design plans come with free logo design, free SSL integration for security and search engine optimization.
Prices start at ₦30,000
GET FREE QUOTE

Get your Business online in 2019

Let’s make you a bespoke responsive business website. All our web design plans come with free logo design, free SSL integration for security and search engine optimization.
Prices start at ₦30,000
GET FREE QUOTE

Recommended Hosting

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

PowerDesign is a leading web design and startup branding agency in Nigeria. We help young Nigerian brands establish powerful online presence with beautifully-crafted, fast-loading, ultramodern and responsive websites that gets noticed.

CONTACT INFORMATION

Lagos address: 26 Olayiwola Street, Mongoro, Agege, Lagos State.
Gombe address: Staff Quarters, General Hospital Dukku, Dukku Town, Gombe State.
08071475685