Rachel S Rachel S - 2 months ago 22
CSS Question

How to get chevron to align to center of link tab

I'm using Bootstrap and have a navbar with several links. The first few links have dropdown menus. On top of each dropdown menu I added a triangle turned upward pointing to the link you just clicked. The problem is, the links are of different lengths (BRANDS vs MEN'S WATCHES) and I want the triangle centered with the text. Since the triangle is done with CSS via the

:before
attribute on the
dropdown-menu
, I don't know how to center it according to the
li
with the
dropdown
class.

Bootply of my navbar: http://www.bootply.com/ebKpdebUKh

CSS for the triangle:

#main_navbar2 .dropdown-menu:before { position: absolute;
top: -10px;
left: 55px;
display: inline-block;
border-right: 9px solid transparent;
border-bottom: 9px solid #000;
border-left: 9px solid transparent;
content: '';}

Answer

Centering of "chevron" has been done by using JQuery.

Check complete example at CODEPEN

HTML:

    <li class="dropdown">
      <a href="/brands.html" id="header-brands">BRANDS</a>
      <ul class="dropdown-menu multi-column columns-6" role="menu">
           ---- Multi column section ----
      </ul>
    </li>

JS:

$('.dropdown-menu , .dropdown > a').hover(function() {
  $(this).parent().find('a:first-child').addClass('menu-pointer')
}, function() {
  $(this).parent().find('a:first-child').removeClass('menu-pointer');
});

CSS:

#main_navbar2 .dropdown > a.menu-pointer:after {
  top: 34px;
  margin: auto;
  position: absolute;
  display: block;
  border-right: 9px solid transparent;
  border-bottom: 9px solid #000;
  border-left: 9px solid transparent;
  content: '';
  left: 0;
  right: 0;
  z-index: 999;
  width: 9px;
}

I hope this helps you

Enjoy :)

Comments