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

css, html, less, navbar, twitter-bootstrap

Solution

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);
}

Problem

Original source