Sharepoint - Change look of arrow(s) on current navigation
Try the following CSS to replace the default arrow on the navigation & to align it:
.ms-core-listMenu-verticalBox li.static > .ms-core-listMenu-item .ms-navedit-flyoutArrow
{
background-image: url(images/menu-down.png);
float: right;
}
If you have a multilevel navigation, you need to do the change to the sublevel as well:
li.dynamic.dynamic-children span.additional-background.ms-navedit-flyoutArrow.dynamic-children
{
background-image: url(images/menu-down.png);
float: right;
}
to change the color of the arrows you can edit the image at "/_layouts/15/images/spcommon.png" but this will have effect on the whole SharePoint environment. More information at: SharePoint 2013 spcommon.png Sprite Breakdown
to edit the arrows, you should try looking what element they are in and what css file. (the default css file should be at: "/_layouts/15/1033/styles/Themable/corev15.css")
try experimenting in your browser by pressing F12 and then clicking the arrows, this will show the css on the right too, once you found what element it is in you can just add "float:right;" and this should do the trick, if at least the menu blocks are all same size
With help of you I played little bit and found solution that suits me.
It is almost same as Moe's post, but that solution has small problem, image is seen on all of the elements on vertical navigation, not just on ones which have children. Anyway, thanks both on help. Bellow is my code:
.ms-core-listMenu-verticalBox li.dynamic-children > .ms-core-listMenu-item .ms-navedit-flyoutArrow
{
background-image: url("library/image");
}
.ms-core-listMenu-verticalBox li.static > .ms-core-listMenu-item
{
text-align: right;
}