How to add logo to Bootstrap's affixed nav

Question

I'm trying to add a smaller version of my site logo to Bootstrap's affixed nav bar when the user scrolls.

Here is my site.

This is what I've been working on so far... I've tried adding to the the nav.affix with the smaller logo but it hasn't worked. Am I on the right path?

#nav.affix {
position: fixed;
top: 0;
width: 100%;
z-index:10;
background: rgb(255, 255, 255) transparent;
background: rgba(255, 255, 255, 0.8);
}
#nav #nav-img {
background-image:url(http://static.tumblr.com/bw1wxme/rOYn2c6na/logo-small.jpg);
}
#nav.affix #nav-img {
display:inline-block;
}
#sidebar.affix-top {
position: static;
}
#sidebar.affix {
position: fixed;
top: 180px;
}

Here is JSfiddle

score 2 · Accepted Answer · edited May 23 '17 at 12:16

Looks like you can do it a few different ways.

May want to try looking at some of these suggestions:

CSS Approach

HTML Approach

Edit:

You can do something like this in javascript:

$(window).scroll(function(){
   var height = $(this).scrollTop();
   var brand = $("#brand");
   if (height > 100){
     brand.show();   
   }
   else{
      brand.hide();
   }
});

I have updated your jsfiddle with some changes: Fiddle It isn't completely working with layout included but it does what you are expecting. I added a div in your html with the id and class of Brand. I then set the background to the url you have for the logo. I also set it to hidden by default. When you scroll the logo should appear and disappear when you scroll back up to the top.

I want the logo to appear on the navbar after the people has begun to scroll tho — Social Monster, Mar 12 '14 at 19:29

How to add logo to Bootstrap's affixed nav

1 Answers1