Multiple .navbar-right in .navbar-collapse overlap (margin-right error)
Created by: miniplus
When using multiple .navbar-right
containers inside a .navbar-collapse
, the last .navbar-right
container gets a negative margin (using :last-child
) so that the content aligns with .navbar-collapse
.
The problem here is that the first .navbar-right
is the one aligned to the far right (so actually the first appearance in the DOM get's aligned to the right). The last appearance of .navbar-right
gets a negative margin-right which causes the last one and the one before to overlap and the content still not aligning to the right of .navbar-collapse.
:first-child
can not be used as the first appearance of .navbar-right
is not the first child within it's container.
Also, there is no support for :last-child
in IE8.
Proposed solution
Target all direct .navbar-right
children of the container and apply the negative margin-right. After that negate the margin-right on all following .navbar-right
items by setting the margin-right to 0.
Also allowing IE8 support
Example
.navbar-collapse {
> .navbar-nav.navbar-right {
margin-right: -15px;
~ .navbar-right {
margin-right: 0;
}
}
}