0

I'm trying to add a triangle on the "active" element on the menu. I've added this css:

.navbar .active::after {
content: "";
position: absolute;
bottom: -16px;
border-width: 0px 15px 15px;
border-style: solid;
border-color: #ffffff transparent;
display: block;
width: 0;
}

But for some reason I'm getting 2 triangles slightly ontop of eachother on active elements as per attached screenshot. I don't know how else to get it right....please help?

hmartens
  • 33
  • 5
  • No screenshot attached, you may need to link of to imgur or something. Also, some HMTL code would be helpful. Are you sure there aren't 2 active items, e.g. a parent and child? Finally, I'd use single `:` for greater browser support ( – davidpauljunior Nov 12 '13 at 22:43

1 Answers1

0

andregriffin over on Drupal.org answered my question " It's probably because there are two nested elements, both with the .active class, such as the li and the a tag. You need to be more specific on which one you are applying CSS to. you should probably use .navbar > .active:after or .navbar a.active:after or .navbar li.active:after."

So I ended up with the following CSS and it works perfect! /* Active caret */ .navbar a.active:after { content: ""; margin-left: auto; margin-right: auto; padding-top: 2px; border-width: 0px 10px 10px; border-style: solid; border-color: #ffffff transparent; display: block; width: 0; }

hmartens
  • 33
  • 5