Why isn't my nav logo fading out :?

Hey Nicholas,

I've been playing around with your issue and I got it to work where the navbar-brand logo ("Driven") fades back to a 0 opacity when you scroll back to the top. I'm not sure if this is the correct way to go about it but here is what I found:

There were two problems with your issue:

1. Because you are using Bootstrap affix.js to add classes to your navbar ("affix-top, affix") at certain positions, you will need to add the corresponding CSS transitions to each of those classes.. What I basically mean is that if you add a CSS transition effect to "fade in" the logo by changing its Opacity to 1 (Opacity: 1;) when you scroll down and use Bootstrap affix.js to add the "affix" class to the navbar, you have to do the same when you scroll BACK UP to affix-top. So what I did is something like this:

   nav.affix-top .navbar-brand {
       opacity: 0;
       color: #ff0066;
       transition: opacity 1.1s ease-out;
       display: inline-block;  /* notice this part, which I will address in the bottom */
      }
   

2. Notice when you scroll down and when the "affix" class is appended to the navbar, you set the display to "inline-block." But when you scroll back up and the "affix-top" class is re-appended to the navbar, the display is set to "none" (?, I think haha). What I did was that I set the display to "inline-block" instead of "none" when the "affix-top" class is re-appended, and now scrolling back up "fades-out" the .navbar-brand as you would like.

So in summary if nothing I said made sense:

1. Add a CSS transition to nav.affix-top .navbar-brand
2. Set display to inline-block in the same selector.

I think if you copy and paste the code above, it should work like how you want it to work, but you have to adjust some of the speed of the transition and possibly the height of the logo for it to "look better."

Hope this helps. Good luck!

Hi Nicholas,

Try adding this css rule to your styles and see it that solves your problem.

nav.affix-top .navbar-brand {
    opacity: 0;
}

Thanks guys awesome! Funny enough I started working towards this whilst I was waiting for a reply.

Once again thanks awesome help!