same css3 transform rotate 90deg not working

Question

This site is a copy of this site, except for the widget producing the left sidebar menu.

The problem is that to the left of Leadership in the left side menu on the first site, the arrow points to the right. However, it has the following CSS applied to it:

.page-menu.ancestor-tree ul li.current_page_item a:before {
    font-family: 'Zapf Dingbats';
    font-size: 15px;
    content: '\276F';
    margin-right: 10px;
    transition: all 0.3s;
    -ms-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}

This mimics the CSS on the 2nd site, where the arrow to the left of Leadership in the left side menu is successfully rotated 90 degrees clockwise, so that the arrow points down.

Why is the rotation working on the 2nd site and not on the 1st?

I can't open your first link. – thstamod Apr 20 '18 at 07:55 — thstamod, Apr 20 '18 at 07:55
Sorry, fixed the link @th.stamod – Steve Apr 20 '18 at 08:00 — Steve, Apr 20 '18 at 08:00

score 0 · Accepted Answer · answered Apr 20 '18 at 08:05

0

You should add display:inline-block; or display:block; to your css class.

answered Apr 20 '18 at 08:05

thstamod

174
1
8

same css3 transform rotate 90deg not working

1 Answers1