Wordpress CSS Main Navigation .current-menu-item transform:

Question

I have a local install of wordpress and working with a theme. When on a page, the 'current page' has a dynamic colored line with triangle shape. The ultimate goal is to take the triangle and duplicate it across the whole menu item, for a jagged effect, instead of the single centered one.. I found some material on 'Dynamic Menu Highlighting' but can't figure out how to apply it. It's not an image or background image, it seems to be purely css. Below is the css sample from styles.css. When I play around with transform: I can get some results, just not the results desired. Hope someone can help. Thanks!

.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;
}

It seems like your question is related to wordpress. I suggest putting that in your question title too. The CSS example is good, but without the html, it's a little hard for people who don't use wordpress to figure out. Also, you can use [jsfiddle.net](http://jsfiddle.net) as tool to show your example more clearly. — VKen, Oct 07 '12 at 04:55
I'm not entirely sure this is related to wordpress, but it would halp to clarify... Is it that want to take an existing style on an existing element and change how the style appears on that element? If that's the case, then it's purely a css question. Can you confirm either way? — caitriona, Oct 07 '12 at 21:01
It is directly related to css. Wordpress is to put it into context, I guess. As far as the element goes. That's what I can't figure out. When I play the transform: rotate and set the degrees to 90, it becomes squared. By default at 45deg it's a triangle. I just don't understand what the shape is, and I don't really know css that well. I'm able to remove it all together, which maybe I'll do. Then I can just replace it with an image, and to get desired effect, of making it jagged. Any explanations or suggestions? — nil, Oct 07 '12 at 22:56
@caitriona Also. Here is a screenshot of the navbar. https://www.dropbox.com/s/d1pxc9xy3bjy7nk/nav-bar.png — nil, Oct 07 '12 at 23:12
ok, i got you. unfortunately it's not going to be an easy css-only fix to create the multiple triangles - as you'll need a new element for each 3 triangles (assuming you can use :after & :before pseudo elements). given your (self-professed) lack of knowledge of css, the simplest solution to get the effect you want may beto use an image. — caitriona, Oct 08 '12 at 08:34

score 0 · Accepted Answer · edited May 23 '17 at 10:24

there's an nice explanation of css triangles here: How do CSS triangles work?

but you can't use this technique to create multiple triangles using only one html element.

you could introduce more elements so that you can display more triangles, but this doesn't sound like a great solution to me. so in this case it might be simplest to use an image. the advantage of using an image is also that you can repeat it horizontally if you have elements of varying width.

EDIT:

I've found another css-only solution (heavily influenced by lea verou's 3rd element here: http://leaverou.github.com/animatable/) - however it doesn't work in IE, so it mightn't be a solution for you, but incase you're interested, here it is:

#zig_zag {
    width: 140px;
    height: 5px;
    border-top:1px solid #E91010;
    background-repeat: repeat-x;
    background-position:10px 0;
    background-size: 7px 10px;
    background-image:
        linear-gradient(-45deg, #E91010 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #E91010 75%),
        linear-gradient(45deg, #E91010 25%, transparent 25%),
        linear-gradient(-45deg, transparent 75%, #E91010 75%);      
}

jsfiddle here: http://jsfiddle.net/hGy6X/

[note: it uses lea verou's prefix free script http://leaverou.github.com/prefixfree/ ]

Hey Thanks a lot @caitriona. That helped me tremendously to understand how that effect was pulled off. After all of that work, I decided it didn't look as good as I thought. Thanks for your efforts. — nil, Oct 12 '12 at 13:18

Wordpress CSS Main Navigation .current-menu-item transform:

1 Answers1