Archived topic
Off Canvas Menu: Change arrow icon?
5 replies · Started by Marc on June 16, 2022
Hello, I would like to change the arrow icon in the off-canvas menu because users often don't understand that they can use the arrow to expand the menu.
I have already set SVG and would like to replace the existing SVG , for example with this FontAwesome icon: fas fa-caret-circle-down.
Is there any way to make this update-proof?
Thank you very much for a tip!
Hi Marc,
You can try a filter like this: https://docs.generatepress.com/article/generate_svg_icon_element/
Hi Ying, thanks for the tip, that works - but it also changes the icons in the main navigation. How do I make the change only affect the OffCanvas menu? Thanks, Marc
Hi there,
to the best of my knowledge the icon can't be different for one nav and not the other.
Its possible to re-style the current icon with CSS - or simply hide the icon and use CSS to insert a different image - is that an option ?
Hi David, thank you very much for your quick reply which brought me to this working solution:
.slideout-menu .icon-arrow{
display:none;
}
.slideout-menu .dropdown-menu-toggle:after {
content: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 1792 1792' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1344 960v-128q0-26-19-45t-45-19h-256v-256q0-26-19-45t-45-19h-128q-26 0-45 19t-19 45v256h-256q-26 0-45 19t-19 45v128q0 26 19 45t45 19h256v256q0 26 19 45t45 19h128q26 0 45-19t19-45v-256h256q26 0 45-19t19-45zm320-64q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z'/%3E%3C/svg%3E") !important;
}
.slideout-menu .dropdown-menu-toggle[aria-expanded="true"]:after {
content: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg width='14' height='14' viewBox='0 0 1792 1792' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1344 960v-128q0-26-19-45t-45-19h-768q-26 0-45 19t-19 45v128q0 26 19 45t45 19h768q26 0 45-19t19-45zm320-64q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z'/%3E%3C/svg%3E") !important;
}
Thanks again for the support!
bye, Marc
Glad to hear that :)
