Submenu Back Button Icon

[salilou]

Hello,
I’d like to add an arrow icon to the back button of the submenu in Cornerstone Pro using the “Navigation Layered” element. Is that possible?
Best regards,
Hannes

[Ismael]

Hello Hannes,

Thank you for the inquiry.

Have you tried adjusting the Menu > Setup > Back Label option of the Navigation Layered element?

Let us know if this is what you’re looking for.

Best regards.

[salilou]

Thanks.
Yes, I tried that, but it didn’t work except for displaying a simple HTML arrow.
It would be nice if I could add a Font Awesome symbol like the “left arrow” \f060 there.

[prakash_s]

Hello @salilou,

I would suggest you please remove the arrow from the element settings.

You need to go to the customize —>Element CSS and add this custom CSS code there.

$el .x-anchor-layered-back span.x-anchor-text-primary:before {
content: '\f060';
font-family: FontAwesome;
} 

The purpose of providing custom CSS is to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector.In case you have no idea about coding you can subscribe to One where customization questions are answered.

Hope it helps.
Thanks

[salilou]

Thank you, that worked fine!

The standard arrow-left icon is displayed now:

Is there a way to change it to the thin variant of the icon as seen in the main menu:

Thank you!

[Ismael]

You’ll have to replace the previous css with this:

$el .x-anchor-layered-back span.x-anchor-text-primary:before {
  content: '\f060';
  font-family: "FontAwesomeLight" !important;
  font-weight: 300;
  font-style: normal;
  font-variant: normal;
} 

As mentioned above, you can check out our One service for additional assistance with this type of modification.

Kind regards.

[salilou]

Great - thank you!

[prakash_s]

You are most welcome @salilou