Hamburer Icon

Hi,

This could be a conflict. Maybe with Font Awesome versions? If I change your code from

<i class="fa fa-navicon"></i>

to

<i class="fa fa-bars" aria-hidden="true"></i>

I see the hamburger menu.

Screen grab.

View post on imgur.com

Reference

https://fontawesome.com/v4.7.0/icon/bars

Have you tried posting your issue to the Elementor forum?

Just following up.

On my Astra site (no Elementor), here’s what my mobile menu code looks like.

HTML

<span class="menu-toggle-icon"></span>

CSS

.ast-button-wrap .menu-toggle .menu-toggle-icon::before {
    content: "\e5d2";
    font-family: 'Astra';
    text-decoration: inherit;
}

Screen grab https://imgur.com/a/hLe6DOO

If you add this custom CSS, you should see the bars show up. But, then you’ll need to add custom code for the animation from bars to an “X”. Which is doable if you know how to. I’m sure I’ve got an example I can dig up if needed.

.fa.fa-navicon::before {
    content: "\e5d2";
    font-family: Astra;
}

How to add custom CSS to WordPress.

This is a band-aid fix for sure. I would still try to get an official fix from Elementor and Brainstorm Force (Astra).

Good luck!

Hello @thesitedoc

I am not sure what exactly could the reason you are unable to see the icon.

As @mlchaves mentioned do reach out to the Elementor team to see if they can help with the icon issue as you are using their default menu.

Also, an error I noticed could be unrelated but do try resolving the same to see if it helps.

Looking forward to hearing from you!

Regards,
Suman