Apply Twitter Bootstrap LESS to my own .less stylesheet not working

Question

In Twitter Bootstrap v. 2.3.2 navbar.less file, you can find this code:

// Active nav items
.navbar .nav > .active > a,
.navbar .nav > .active > a:hover,
.navbar .nav > .active > a:focus {
  color: @navbarLinkColorActive;
  text-decoration: none;
  background-color: @navbarLinkBackgroundActive;
  .box-shadow(inset 0 3px 8px rgba(0,0,0,.125));
}

Now, the 'problem' is that my 'li' does not have the class .active, but .current-menu-item. But I still want to apply the above CSS to the a element. So in my own style.less file, I added:

li.current-menu-item a {
  .navbar .nav > .active > a;
}

But for some reason this is not working. I'm not able to figure out why it is not working. To illustrate, I want to give a example that IS working.

In Twitter Bootstrap v. 2.3.2 you can find type.less that has the following code:

// Single-line list items
ul.inline,
ol.inline {
  margin-left: 0;
  list-style: none;
  > li {
    display: inline-block;
    .ie7-inline-block();
    padding-left: 5px;
    padding-right: 5px;
  }
}

For horizontal menu, where in the source code my ul element does not have a class .inline, but .menu, I simply do this in my own style.less:

ul.menu {
   ul.inline;
}

That is working with NO problems at all. Can anybody help me out?

score 0 · Answer 1 · edited May 23 '17 at 11:50

afaik, your

ul.menu {
   ul.inline;
}

code does not work too.

Your problem seems very similar to Overwriting Twitter Bootstrap Less not working, adding new things does work

You can only mixin simple classes.

Try the following Less code:

li.current-menu-item a {
  &:extend(.navbar .nav > .active > a);
}

Also see: http://lesscss.org/features/#extend-feature-combining-styles-a-more-advanced-mixin

Apply Twitter Bootstrap LESS to my own .less stylesheet not working

1 Answers1