Σ Sigma Hosting is mainly a video tutorial website

Σ Sigma Hosting is mainly a video tutorial website that make it easier for you to search within the transcript of videos for solutions of problems you might face during your journey in dealing with different webhosting companies. So, we are very sorry if the text is not well organized and we may work on it in the future but for now we hope you get the benefit mainly from the video then you may need to have a look on the transcript. Thanks for your understanding 🙂

hi guys you all know that Elementor Pro has an app menu widget and it has some decent a styling option as well but one thing I think it is missing is the ability to change this mobile mm icon as you can see it's the default hamburger icon and the X icon so I will show you how we can change this hamburger icon also these X icon so that is very easy so we will use the font of some five icon as Elementor just got updated front or some five so that will be awesome so we can use any of this icon from fountains of five this is free one so any of this free icon available in here you can use any of them that's awesome so let me show you how we can tell that so first of all if I inspect on this hamburger icon and go to inspect as you can see the icon has a I tag and it has a class called e I called menu bar so we need to target that a I can maneuver class so let's copy that yeah one my number and we won't apply the any CSS to e icon menu bar rather then we will use or apply the CSS for the before should or classes you can see our inside of this I we have a before so we will target that before so icon menu bar before okay so in here we need to use three things first of all we need to specify the font family so the font family will be the font or some we will use the font or some and then we need to use the icon a specific icon code and then we need to specify the font weight so this three thing we need to in a group so let's first of all let's add font family and in front family we need to type on awesome five free so our font family will be font awesome five free as we are using free version of this font or some then we need to specify the specific icon code so you can choose any icon from in here for our tutorial purpose let's use this angle down so how we can get this a specific code these class won't work so if we click this little eye icon and if you click on this because each icon under this icon we we have now a new code so these code is unique for any specific icons so we need to copy that code so for our angle down we need to copy this f-107 so let's copy it and in here we need to specify the content and first of all before pasting the fault code icon code we just need to put it backwards lesson here as you can see content slash f-107 so this slash is necessary okay so can first of all font family will be foreign to us on five free and the content will be slash and the code great so and lastly we need to specify the font weight unless it will be nine hundred the font weight will be nine hundred for in our for our place so let's save this and let's check our page if the icon has updated as you can see our icon now changed that's great but if we click on this icon the X icon or the cross icon is now invalid showing invalid so we need to fix that so before inspect our s icon you can see the e icon menu bar class is exactly fine but on top of that elemental menu table we have a new class called Elementor active so in it is specify or Target that Elementor active so I am copying the whole class so I am targeting the elementary notable elemental active class then we can just copy paste in here so elemental menu travel elemental active then our before tag as well so we need to change this content so it will be the content let's say our icon will be this one select paste code in here so we don't need to specify the font family and the font orient again because we already write this one so let's save this and let's refresh so this is our main toggle icon and if I click as you can see our close I can also update it so there's awesome so do you think we need to do we need to first add the font family font to it and the icon code to this menu bar before tag and then we need to target that Elementor active class and the maneuver before Ted and update these icons so this is how we can update mobile may notable icon you .

Video Discription

Hi guys in this tutorial i will show How to Change mobile menu toggle icon in elementor. This is very easy. We can use any icon from fontawesome icons. We just need some css. thats it.

 

Leave a Reply