Unable To Replace Menu Rectangle With Arrow For Submenu Indication
Alexander
Dear JoomShaper Support Team,
I’m currently working on customizing the main menu on my website using SP Page Builder and your template system. Unfortunately, I haven’t been able to resolve a specific issue related to the menu design:
At the moment, a small rectangle appears next to menu items that have submenus. I would like to replace this rectangle with a more intuitive right arrow (→) that clearly indicates a dropdown or submenu. I’ve already tried several approaches through the template settings and CSS overrides, but without success.
Could you kindly advise how I can achieve this modification? If custom CSS or a particular menu setting is required, I’d be grateful for any guidance or code snippet you can provide.
Thank you in advance for your support!
Best regards, Alexander Riegler
Ziaul Kabir
Accepted AnswerHello,
Thanks for reaching out to us.
Please, use this css in your custom css, you can check this documentation to add custom css: https://www.joomshaper.com/documentation/helix-framework/custom-code-css-js-meta
.sp-megamenu-parent .sp-dropdown .sp-dropdown-items .sp-has-child>a:after {
content: "\f107";
font-family: "Font Awesome 5 Free";
font-weight: 700;
}Thanks
Alexander
Accepted AnswerThanks - you are better than ChatGPT. Great work.
Alex
Ziaul Kabir
Accepted AnswerYou are welcome. We greatly value your opinion and would love to hear your feedback about SP Page Builder. If you could spare a moment, it would mean a lot to us!
You can share your review here: