Change Menu ICON

mroussev · February 2017

Hello,

I am searching a way, maybe with CSS, to change MENU BUTTON on Simple header (the one with three lines), with some custom picture. But it seems that this is not a picture at all, am i correct? How to achieve this?

P.S: I saw that actually in ICONs, there is a icon icon-menu-fine. I will be fine with just instructions where is this icons file located, since i cannot find it and just to replace it.

mroussev · March 2017

Sorry for double post but...Any clue which file is the one that holds icons? I cannot find anything in theme files. These icon pictures must be packed somewhere?

Bryan · March 2017

Hi,

Justo go to theme options>responsive>header and srcoll down to the Button|Text field. In the field you can enter the html code of an icon like etc

Hope this helps

Bryan · March 2017

Hi,

Justo go to theme options>responsive>header and srcoll down to the Button|Text field. In the field you can enter the html code of an icon like etc

Hope this helps

mroussev · March 2017

Aha...Since my knowledge in css is very minimal, how can just switch image? I will prepare new image that i want for icon with same resolution, in .png i guess (?). How to "define" it and where as a class, and then to put it there?

The image icon is icon-menu-fine. What to write to switch it with my custom image, that i will upload somewhere on the server? Can you provide me such support? Thanks in advance.

I tried this 

But i get only black square and i think is not correct.

Bryan · March 2017

Yes, instead of using the <i class="... just paste the IMG tag with your image src

mroussev · March 2017

Yes, now is working. Thanks you!!
But i have small issue. On all pages "height: 35px" as style works fine, except SHOP and CART page. I guess there is some other settings for them in templates.

Can you help me with css selector for them to put !important of height? Or if you suggest other way to adjust height of the icon.

.responsive-menu-toggle .home { height: 100px !important;}

is not working.

Bryan · March 2017

This custom css that you have in your theme controls the size of the icon

.home > img:nth-child(1) { height: 45px !important;
 width: 45px !important;
}

mroussev · March 2017

It seems that is working only half, for the height.

It turns out that proper selector is this one:

.responsive-menu-toggle > span:nth-child(1) { height: 45px !important;
width: 45px !important;
}

Thanks for the hint where to look.

Bryan · March 2017

Glad it works, thanks

mroussev · January 2019

Hello again,

I finnaly decided to update theme to latest version and wordpress also, but, my menu icon not seems to be transparent for some reason...The code in theme options>responsive>header is the same, icon picture is there, NOTHING was changed except update wordpress and Betheme.... Did you guys change some classes or something like that? I cant find reason why is not working. when i remove code in Button|Text field menu icon is visible, but its not that one that i want?

I know that my support was expired, but i need help only with this, i didnt change anything. Thanks in advance!

The site is http://artag.shop/

Pablo · January 2019

Hi,

Which code in "Button | Text Field" do you have?

We had to disable HTML tags in the text fields for now due to new envato security reasons.

We'll implement the support of a, i, b, em, span, strong and u tags in the next update.

Also, disable all of the plugins, clear the cache and check if the issue still exists.

Thanks

mroussev · January 2019

This one:

All CSS code related to menu icon in custom CSS is this:

.responsive-menu-toggle.home { height: 45px !important;
}
.responsive-menu-toggle > span:nth-child(1) { height: 55px !important;
width: 55px !important;
}

If this is because of this HTML tags, how to achieve this again? This picture to be as a menu button?

Pablo · January 2019

For now it's not possible.

Also, the <img> tag will not be supported in the future update.

I suggest you to remove whole HTML from there for now and leave the simply text there.

Envato security requirements:

https://help.author.envato.com/hc/en-us/articles/360000481243-WordPress-Theme-Security-Requirements#h_674316188621522302914837

The update will be released tomorrow.

Thanks

mroussev · January 2019

"leave the simply text there"

Which text? By default it is empty i think? I mean is there other way to display picture for menu button with this option?

Pablo · January 2019

Sorry, my fault - I meant to make this field blank(empty) - make it deafult.

Unfortunately, there is no option in BeTheme's Theme Options to change the menu icon.

I wanted to tell you to attach in CSS the background image in the tag but you did it as I can see.

If you're making theme files customization, then remember to use the Child Theme.

Without a Child Theme all of your customization will be overwritten while updating the theme.

You can find a Child Theme files in the package with theme from theme forest.

All about Child Themes here:

https://developer.wordpress.org/themes/advanced-topics/child-themes/

Thanks

Change Menu ICON

Comments