Solved hamburger menu icon appears as letter "a"

I don't know if you can offer a solution to this, but there is an issue with Divi's font-icon hamburger menu displaying improperly when users are on a slow cellular connection such as 3G. What happens is that the hamburger does not initially display. Instead, a lowercase "a" appears, and then eventually the hamburger replaces it.

So, I would like to substitute the font icon with a .png to avoid the letter "a" appearing. But, when I tried to do that, I could not scale down the .png to the correct size (29px x 19px for a phone). I tried various instances of "width" and "max-width", with and without "!important", but could not get the hamburger .png to size correctly.

If you are able to help, could you tell me what is missing in my code below?


I changed CSS from this...

@media only screen and (max-width: 767px) {
.mobile_menu_bar:before {
font-size: 45px;
margin-left: -6px;
}
}


To this...

@media only screen and (max-width: 767px) {
.mobile_menu_bar:before {
content: url("/wp-content/uploads/hamburger.png") !important;
margin-left: -6px;
}
}


(Please note that I omitted any "height" and "width" settings from the second piece of code above, as they did not have any effect on the hamburger.png.

I would prefer to send you a PM with the URL, as this is a client site in progress. Thanks for your understanding.

 

Wow! That was an incredibly fast response which gave me all the code I needed to get this header back on track. Many thanks!

 

I am very sorry to trouble you with this, but the hamburger PNG has suddenly disappeared from the site without me changing any CSS. The PNG also has not been modified or deleted. I have also tried deactivating plugins, and updating to the latest Divi, but that does not work either. Is there any code which you might add which would ensure that the hamburger PNG is always displayed?

I have sent you a PM with the URL for this client site.

Here is the code that was working before:


/*--------Hamburger--------*/

/*---Tablet---*/
@media only screen and (min-width: 768px) and (max-width: 980px) {
/*Hamburger PNG*/
.mobile_menu_bar:before {
content: ''!important;
margin-left: 32px;
margin-top: -20px;
width: 34px!important;
height: 20px!important;
display: block!important;
background-image: url("/wp-content/uploads/hamburger.png")!important;
background-size: contain;
background-repeat: no-repeat;
top: 36px;
}
/*Close X FONT*/
.mobile_menu_bar:after {
font-size: 50px;
padding-left: 73px !important;
}
}

/*---Phone---*/
@media only screen and (max-width: 767px) {
/*Hamburger PNG*/
.mobile_menu_bar:before {
content: ''!important;
margin-left: 2px;
margin-top: -19px;
width: 29px!important;
height: 19px!important;
display: block!important;
background-image: url("/wp-content/uploads/hamburger.png")!important;
background-size: contain;
background-repeat: no-repeat;
top: 32px;
}
/*Close X FONT*/
.mobile_menu_bar:after {
font-size: 45px;
padding-left: 33px !important;
}
}



Thanks again for your fantastic support.

 

An update:

I was able to troubleshoot this.

The problem with the code suddenly not working was due to a setting with the SG Optimizer plugin. When the plugin's "Combine CSS Files" setting was turned off, the problem disappeared.

Sorry for the confusion.