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.
I'd really appreciate some help on this.
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.
I'd really appreciate some help on this.
