Off Canvas Item Icons - Forum | JoomShaper
Solved Helix Framework

Off Canvas Item Icons

Asked by Chris Nichols 4 years ago Last activity 4 years ago

I'd like to be able show mobile users if a menu item is an external link.

Easy to do for Mega Menu, but I can't work out how to do it for the Off Canvas menu.

I gave main menu external link items the class name of "mmexternal", and drop down external link items the class name of "dropdownexternal"

I'm using CSS to give the fa-external-link-alt icon a contrasting colour to the text by giving the menu item a class name in the menu builder and using the below in my custom.css file

.sp-megamenu-parent > li.mmexternal > a {color:#00713d!important; }
.sp-megamenu-parent > li.mmexternal .fas.fa-external-link-alt {color:#cfab79!important;}
.sp-megamenu-parent .sp-dropdown li.sp-menu-item.dropdownexternal > a {color:#00713d!important; }
.sp-megamenu-parent .sp-dropdown li.sp-menu-item.dropdownexternal .fas.fa-external-link-alt {color:#cfab79!important;}

I see when I use Inspect in Chrome, that the Off Canvas meue items have the class names I gave them.

Can I add to my custom.css file to display the external link icon on Off Canvas menu items that I have given a class name?

Accepted answer

Marked as the solution
Chris Nichols Asked this

I believe I've answered my own question. Hope this helps someone else.

.offcanvas-menu .offcanvas-inner ul.menu>li.mmexternal a:before{content: "\f35d \00A0" !important; font-family: "Font Awesome 5 Free" !important; font-weight: 700; !important; color: #00713d !important; }
.offcanvas-menu .offcanvas-inner ul.menu ul.menu-child>li.dropdownexternal a:before{content: "\f35d \00A0" !important; font-family: "Font Awesome 5 Free" !important; font-weight: 700; !important; color: #00713d !important; }

1 more reply

Ofi Khan Staff

Hello Chris Nichols

Awesome! Thanks for sharing the solution. It will help the community.

Best regards

Log in to reply.