I am currently working on a local WordPress installation with a theme. One specific feature I am trying to achieve is to have a dynamic colored line with a triangle shape indicating the 'current page' on the menu. My goal is to duplicate this triangle across all menu items for a jagged effect, rather than having just a single centered triangle. I have come across some information on 'Dynamic Menu Highlighting,' however, I am struggling to apply it effectively. The triangle effect is not achieved using an image or background image, but rather through CSS styling. Below is a snippet of the CSS code from styles.css. I have tried altering the 'transform' property, but have not been able to achieve the desired results. I hope someone can provide some assistance. Thank you!
.not-ie #main-nav .current_page_item:after,
.not-ie #main-nav .current_page_parent:after,
.not-ie #main-nav .current-menu-item:after {
background: #f15a23;
bottom: -2.5px;
content: '';
left: 50%;
display: block;
height: 5px;
margin: 0 0 0 -2.5px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
position: absolute;
width: 5px;
}