CODEWITHSUNDEEP
csstwitter-bootstrap
boop
boop

Reputation: 7788

How to modify a class when a specific class exists on the same element?

So I have my (simplified here) bootstrap navbar here.

<nav class="navbar">
    <ul class="navbar-nav">
        <li><a href="#">foo</a></li>
    </ul>
</nav>

.navbar-fixed-top {
  height: 100px;
}
.navbar-nav >li >a {
  line-height: 100px
}

I just want to shrink the navbar when I add the class .shrink to nav. Pretty easy, just adding the following to my css:

.shrink {
    height: 80px;
}

The problem is: the line-height of .navbar >li >a stays 100px - is there a way I can affect this with css only?

Upvotes: 0

Views: 29

Answers (2)

Tim Sheehan
Tim Sheehan

Reputation: 4024

Something like this perhaps?

.navbar {
  height: 100px;
}

.navbar.shrink {
  height: 80px
}

.navbar > .navbar-nav > li > a {
  line-height: 100px
}

.navbar.shrink > .navbar-nav > li > a {
  line-height: 80px
}

Upvotes: 2

Ieuan Stanley
Ieuan Stanley

Reputation: 1258

you could try:

.shrink a {
    line-height: <whatever>;
}

That will apply the styles you want to an a element contained in an element with the shrink class.

Upvotes: 0

Related Questions