Why is the .navbar mixin not working in Bootstrap 2.3?

Question

I've been trying to convert the Bootstrap example of including the class in the HTML to using LESS mixins. So far I have succeeded, but I am running into problems with my menu. Currently I'm using the following in my main .less file (I've included bootstrap.less):

#container #menu {
    .navbar;
    .navbar-inverse;
    .navbar-fixed-top;

    div {
        .navbar-inner;
        ul { .nav; }
    }
}

and the corresponding HTML:

<div id="container">
    <nav id="menu">
        <div><ul role="menu">
            <!--- ... -->
        </ul>
        </div>
    </nav>
</div>

The navbar-inverse and navbar-fixed-top are being applied, but navbar and nav aren't working.

Answer 1

It Appears You Misunderstand Mixins

I think your main issue resides in your self-proclaimed goal: "I've been trying to convert the Bootstrap example of including the class in the HTML to using LESS mixins."

So you are trying to avoid adding the .navbar and .nav classes (etc.) in your HTML by making them included in your id selectors as mixins. This probably appears to work fine for .navbar-inverse and .navbar-fixed-top (I actually suspect there is a slight inconsistency in applying those, I'll explain more later) because the chief thing those do is add some styling to the particular element they are applied to.

Your problem is all the other interrelated selector combinations used by the navbar.less file of bootstrap. Simply adding .navbar and .nav as mixins also only applies the styling of those classes to the item you are mixing into. What it does not do is recognize any of the relationships necessary for the nav to function right. For example, take this sample of the code in bootstrap:

.navbar .nav {
position: relative;
left: 0;
display: block;
float: left;
margin: 0 10px 0 0;
}

.navbar .nav > li {
float: left;
}

// Links
.navbar .nav > li > a {
float: none;
// Vertically center the text given @navbarHeight
padding: ((@navbarHeight - @baseLineHeight) / 2) 15px ((@navbarHeight - @baseLineHeight) / 2);
color: @navbarLinkColor;
text-decoration: none;
text-shadow: 0 1px 0 @navbarBackgroundHighlight;
}

It is these combined selectors that make the functionality of the nav work. But in your code, you don't have a .navbar .nav relationship in your HTML, you only have #container #menu ul relationship. So none of the combined selector codes are being picked up.

Recall that a mixin does not cause that class to be applied to the element, it only causes the properties of that class to be included in your selector.

You would need to convert every instance of combined selector combinations in the bootstrap file to be your selectors, which is going be far more of a pain than simply adding the classes to your HTML where they should be.

Back to the note on what appears to be working. I suspect that these relationships are not being picked up in your code either, since you have no .navbar-fixed-top .navbar-inner class relationship in your HTML:

.navbar-fixed-top .navbar-inner,
.navbar-static-top .navbar-inner {
  border-width: 0 0 1px;
}
.navbar-fixed-bottom .navbar-inner {
  border-width: 1px 0 0;
}
.navbar-fixed-top .navbar-inner,
.navbar-fixed-bottom .navbar-inner {
  padding-left: 0;
  padding-right: 0;
  .border-radius(0);
}