Elementor menu Iocn on hover

First add <i class=”fa fa-star”></i>Home to the menu.

Then add this CSS

.main-nav-menu-hc img{
	  opacity:0;
	  transform:rotate(180deg);
margin-right:3px;
transition:0.3s ease;
}

.main-nav-menu-hc .elementor-item:hover>  img,
.main-nav-menu-hc .elementor-nav-menu--dropdown a:hover>img
{
	  opacity:1;
	  transform:rotate(0deg);
}

.main-nav-menu-hc .main-nav-menu-hc .elementor-item {
    color: #4b68ad;
    padding-left: 10px;
    padding-right: 10px;

}

.main-nav-menu-hc .elementor-nav-menu--main .elementor-item {
    color: #4b68ad;
    padding-left: 10PX;
    padding-right: 10px;

}

.main-nav-menu-hc .elementor-nav-menu--dropdown a>img{
	display:inline-block;
		color:#f5c826;
 transform:rotate(180deg);
margin-right:3px;
		  opacity:0;
	transition:0.3s ease;
	
}

.main-nav-menu-hc .elementor-nav-menu--dropdown a{
		text-align:left;
	display:inline-block;
	width:100%;
	
}

@media (max-width:1024px){
 .hc-mobile-menu .elementor img,
 .hc-mobile-menu .elementor-nav-menu--dropdown a>img{
    display:none !important;   
}
 .hc-mobile-menu .elementor-nav-menu--dropdown a{
     text-align:left;
     display:inline-block;
    width:100%;
 }
}

Leave a Reply

Your email address will not be published. Required fields are marked *