By using Elementorforum.com’s services you agree to our Cookies Use and Data Transfer outside the EU.
We and our partners operate globally and use cookies, including for analytics, personalisation, ads and Newsletters.

  • Join the Best Wordpress and Elementor Support forum

    Provide or get advice on everything Elementor and Wordpress, ask questions, gain confirmation or just become apart of a friendly, like minded community who love Wordpress and Elementor


    Join us!

How to hide icons in Elementor menu on mobile

Zanshin

Zanshin

New Member
I am trying to redesign my site's header to have a responsive design without having to resort to a hamburger menu when using a mobile device.

I now only have 4 menu items at the top level; using the Elementor Menu I've added font-awesome icons to each of the 4 elements. But when scaling down from desktop and tablet to mobile view the icons don't scale down sufficiently to be able to fit on one line. I get the text shrinking down, but the font-awesome icons seem to have a minimum size.

I'm trying to find a way, using css, to hide those icons on mobile but keep them visible on larger devices. I have to admit that I've not had any success at all and google searches haven't given me any answers that I can use.

The image below is at mobile size and if I could have the icons not display at this resolution, it would fit on the top line and not be broken into two lines.

TestPage.jpg

I'd really appreciate some help on this.
 
Elementor Services Elementor Services

Latest posts

Latest Resources

Other Elementor Resources

elementor official
Top