Nesting CSS classes for use with Javascript

Question

What is the correct way to nest classes for use with Javascript?

I have an animated header using jQuery, that shrinks after 175px on the page; I also want its opacity to go down using background: rgba() (not opacity:;).

Unfortunately Bootstrap uses two separate divs and classes for the background-color and height. One class is .navbar-default which affects the colour, the other is .navbar-brand which affects the height.

Here is my code:

JS: as you can see, I've set .shrink to be added to .navbar-brand and .navbar-default when scrolling past 175px. Else, the .shrink class is removed.

<script>
  $(function(){
    var shrinkHeader = 175;
    $(window).scroll(function() {
      var scroll = getCurrentScroll();
      if ( scroll >= shrinkHeader ) {
        $('.navbar-brand, .navbar-default').addClass('shrink');
      }
      else {
        $('.navbar-brand, .navbar-default').removeClass('shrink');
      }
    });
    function getCurrentScroll() {
      return window.pageYOffset || document.documentElement.scrollTop;
    }
  });
</script>

HTML: This is a typical Bootstrap navbar layout.

      <nav class="navbar navbar-default navbar-fixed-top">
        <div class="container navbarfix">
          <div class="navbar-header">
            <a class="navbar-brand page-scroll svg" href="link">
            <!-- logo code here -->
            </a>
          </div>
          <!-- links here -->
        </div>
      </nav>

SASS: This is my SASS code, which is very similar to CSS so I'm sure you can work it out.

As you can see the shrink class should change the height and background of both nested classes, but it only changes the height. So my question is how do I format this correctly?

$header_l: 180px
$header_s: 105px

.navbar-brand
  height: $header_l
  transition: height 0.2s

.navbar-default
  background: rgb(241,241,242)
  background: transparent\9
  background: rgba(241,241,242,1)
  transition: all 0.1s

.shrink
  .navbar-default
    background: rgba(241,241,242,0.75)

  .navbar-brand
    height: $header_s

CSS (the SASS compiles to this)

.navbar-default {
  background: #f1f1f2;
  background: transparent\9;
  background: #f1f1f2;
  -webkit-transition: all 0.1s;
  transition: all 0.1s
}

.navbar-brand {
  height: 180px;
  -webkit-transition: height 0.2s;
  transition: height 0.2s;
}

.shrink .navbar-default {
  background:rgba(241,241,242,0.75);
}

.shrink .navbar-brand {
  height:105px;
}

David Li · Accepted Answer · 2015-10-13 00:51:13Z

1

.shrink .navbar-default {
    background:rgba(241,241,242,0.75);
}

This is finding elements with the .navbar-default class under the shrink class. So, it's basically assuming you have a structure of

<div class=shrink> 
    <div class="navbar-default">
    </div>
</div>

What you want instead is for it to apply to elements with both shrink and navbar-default, so you can do

.shrink.navbar-default {
    background:rgba(241,241,242,0.75);
}

answered Oct 13, 2015 at 0:51

David Li

1,3008 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Aylii · Accepted Answer · 2015-10-13 01:05:25Z

1

My suspicion:

The other classes over-power .shrink's settings

Try this:

After the value of a setting add "!important" without quotes or spaces which prioritizes this setting over all same level classes.

Code:

.shrink {
   Background: rgba(241, 241, 242, 0.75)!important;
   Height:105px!important;

}

Also Daniel makes a very good point:

When you put a space between classes in selection(.shrink .navbar-default) it looks for child elements with .navbar-default inside parent elements with .shrink. Removing the space should select element with both classes simultaneously.

:)

Let me know how it goes, Im on a 10 hour bus ride. I got time.

KA

edited Oct 13, 2015 at 1:05

answered Oct 13, 2015 at 1:00

Aylii

5254 silver badges10 bronze badges

Collectives™ on Stack Overflow

Nesting CSS classes for use with Javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related