title: How to Change Elements Before & After Navbar Collapse?
body: <p>I am trying to change a few elements in the navbar on a website. At first, when a user hovers over a link, it will add a border below the link (to indicate that the user is hovering over it), like so:</p>
  
  <p><img src="https://i.stack.imgur.com/auFrJ.jpg" alt="Before, no navbar collapse">
  The navbar is transparent at the top of the page.</p>
  
  <p>And when the user scrolls down the page, the navbar will collapse (if that's the right term?), and look like this:</p>
  
  <p><img src="https://i.stack.imgur.com/hPIF1.jpg" alt="After, collapsed navbar"></p>
  
  <p>The problem is that I do not want the bottom border to appear when the navbar is collapsed. How do I fix this with CSS?</p>
  
  <p>Here is the HTML I have:</p>
  
  <pre><code>&lt;nav class="navbar navbar-default navbar-fixed-top"&gt;
        &lt;div class=container&gt;
          &lt;div class="navbar-header page-scroll"&gt;
            &lt;button type=button class=navbar-toggle data-toggle=collapse data-target="#bs-example-navbar-collapse-1"&gt;
            &lt;span class=sr-only&gt;Toggle navigation&lt;/span&gt;
            &lt;span class=icon-bar&gt;&lt;/span&gt;
            &lt;span class=icon-bar&gt;&lt;/span&gt;
            &lt;span class=icon-bar&gt;&lt;/span&gt;
            &lt;/button&gt;
            &lt;a class="navbar-brand page-scroll" href="#page-top"&gt;&lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="collapse navbar-collapse"&gt;
            &lt;ul class="nav navbar-nav navbar-right"&gt;
              &lt;li class=hidden&gt;
                &lt;a href="#page-top"&gt;&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class=main-links&gt;
                &lt;a class=page-scroll href="#about"&gt;About&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class=main-links&gt;
                &lt;a class=page-scroll href="#portfolio"&gt;Portfolio&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class=main-links&gt;
                &lt;a class=page-scroll href="#contact"&gt;Contact&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class=dropdown-bar&gt;
                &lt;a href=""&gt; More &amp;#9660;&lt;/a&gt;
                &lt;ul class=drop-nav&gt;
                  &lt;a href=""&gt;&lt;li&gt;Blog&lt;/li&gt;&lt;/a&gt;
                  &lt;a href=""&gt;&lt;li&gt;Resources&lt;/li&gt;&lt;/a&gt;
                &lt;/ul&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/nav&gt;
  </code></pre>
  
  <p>Along with the CSS for the navbar:</p>
  
  <pre><code>.navbar-default {
      border-color: transparent;
      background-color: #222;
  }
  
  /* Name in top left corner */
  .navbar-default .navbar-brand {
      font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
      color: white;
  }
  
  /* Hover over name in left corner */
  .navbar-default .navbar-brand:hover,
  .navbar-default .navbar-brand:focus,
  .navbar-default .navbar-brand:active,
  .navbar-default .navbar-brand.active {
      color: #888;
  }
  
  .navbar-default .navbar-collapse {
      border-color: rgba(255,255,255,.02);
  }
  
  /* Navbar button color */
  .navbar-default .navbar-toggle {
      border-color: #bf0a0a;
      background-color: #bf0a0a;
  }
  
  
  /* Navbar icon color */
  .navbar-default .navbar-toggle .icon-bar {
      background-color: #fff;
  }
  
  .navbar-default .navbar-toggle:hover,
  .navbar-default .navbar-toggle:focus {
      background-color: #bf0a0a;
  }
  
  .navbar-default .nav li a {
      text-transform: uppercase;
      font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
      font-weight: 400;
      letter-spacing: 1px;
      color: #fff;
  }
  
  /* Hover over [About, Portfolio, Contact, More] */
  .navbar-default .nav &gt; .main-links a:hover,
  .navbar-default .nav &gt; .main-links a:focus {
      color: #fff;
      outline: 0;
      border-bottom: 4px solid #fff;
      -webkit-transition: all .4s;
      -moz-transition: all .4s;
      transition: all .4s;
  }
  
  /* Hover over [More] */
  .navbar-default .nav &gt; .dropdown-bar a:hover,
  .navbar-default .nav &gt; .dropdown-bar a:focus {
      color: #fff;
      outline: 0;
  }
  
  
  .navbar-default .navbar-nav&gt;.active&gt;a {
      border-radius: 0;
      color: #fff;
      background-color: #bf0a0a;
  }
  
  .navbar-default .navbar-nav&gt;.active&gt;a:hover,
  .navbar-default .navbar-nav&gt;.active&gt;a:focus {
      color: #fff;
      background-color: #407EB0;
  }
  
  @media(min-width:768px) {
      .navbar-default {
          padding: 25px 0;
          border: 0;
          background-color: transparent;
          -webkit-transition: padding .3s;
          -moz-transition: padding .3s;
          transition: padding .3s;
      }
  
      .navbar-default .navbar-brand {
          font-size: 2em;
          -webkit-transition: all .3s;
          -moz-transition: all .3s;
          transition: all .3s;
      }
  
      .navbar-default .navbar-nav&gt;.active&gt;a {
          border-radius: 3px;
      }
  
      .navbar-default.navbar-shrink {
          padding: 10px 0;
          background-color: rgba(34, 34, 34, 0.8);
      }
  
      .navbar-default.navbar-shrink .dropdown-bar:hover &gt; .drop-nav {
          display: block;
          margin-top: 10%;
          padding-right: 100%;
          background-color: rgba(34, 34, 34, 0.8);
      }
  
      .navbar-default.navbar-shrink .navbar-brand {
          font-size: 1.5em;
      }
  }
  </code></pre>
  
  <p>The CSS that adds the border specifically when hovering is here:</p>
  
  <pre><code>/* Hover over [About, Portfolio, Contact, More] */
  .navbar-default .nav &gt; .main-links a:hover,
  .navbar-default .nav &gt; .main-links a:focus {
      color: #fff;
      outline: 0;
      border-bottom: 4px solid #fff;
      -webkit-transition: all .4s;
      -moz-transition: all .4s;
      transition: all .4s;
  }
  </code></pre>
  
  <p>Javascript that handles page-scrolling and navbar change:</p>
  
  <pre><code>var cbpAnimatedHeader = (function() {
  
      var docElem = document.documentElement,
          header = document.querySelector( '.navbar-default' ),
          didScroll = false,
          changeHeaderOn = 300;
  
      function init() {
          window.addEventListener( 'scroll', function( event ) {
              if( !didScroll ) {
                  didScroll = true;
                  setTimeout( scrollPage, 250 );
              }
          }, false );
      }
  
      function scrollPage() {
          var sy = scrollY();
          if ( sy &gt;= changeHeaderOn ) {
              classie.add( header, 'navbar-shrink' );
          }
          else {
              classie.remove( header, 'navbar-shrink' );
          }
          didScroll = false;
      }
  
      function scrollY() {
          return window.pageYOffset || docElem.scrollTop;
      }
  
      init();
  
  })();
  </code></pre>