I have this HTML code:
<div class="elementor-widget-container">
<a href="#" class="mobile-menu-toggle d-lg-none direction-start" aria-label="Mobile Menu" data-skin="dark">
<i class="a-icon-hamburger"></i>
</a>
</div>
And this CSS code to change the font-icon for mobile menu navigation.
.a-icon-hamburger {
content: url(https://example.com/wp-content/uploads/2024/10/Forex-English-Menu.png);
margin-left: auto !important;
margin-right: auto !important;
text-align: center !important;
padding: 0px !important;
display: flex;
flex-wrap: wrap;
align-content: center;
}
I am replacing a font icon with the image.
But it doesn’t align in the center of the screen on mobile.
Here is a screenshot:
I tried to change display to all options but no luck.
You need to sign in to view this answers