Bootstrap Navbar CSS Issue

Question

I have been working in bootstrap for awhile now, and really love the features of it all. But I am having trouble with the navigation header on mobile view. I have an image that displays during the desktop version of the website, and I am trying to change to a smaller icon logo in mobile display.

I have the site bringing up the icon bar and collapsing everything for the login screen on mobile properly. I think it might be as simple as the fact that I don't fully understand the CSS of bootstrap but could anyone tell me how to change the image when the screen collapses into mobile mode.

This is what the website looks like in desktop view:

This is what it looks like when I go mobile now:

This is what the desired look is (made in photoshop):

When the bar goes mobile, I'd like to swap the two images.

Here is my bootstrap code -

   <div class="navbar navbar-inverse navbar-fixed-top dropShadow" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#"><img src="images/logoWhite.png" width="400px"></a>
        </div>

        <div class="navbar-collapse collapse">
          <form class="navbar-form navbar-right" role="form">
            <div class="form-group">
              <input type="text" placeholder="Email" class="form-control">
            </div>
            <div class="form-group">
              <input type="password" placeholder="Password" class="form-control">
            </div>
            <button type="submit" class="btn btn-primary">Sign In</button><span style="color:white;"> or</span>
            <button type="submit" class="btn btn-success">Sign Up</button>
          </form>
        </div><!--/.navbar-collapse -->
      </div>
    </div>

Answer 1

you can use a media query for this. but first use that logo image in background.

assuming that you use .logo for the logo classmate university

HTML:

<a class="navbar-brand" href="#"><span class="logo"></span></a>

CSS:

@media(max-width:767px){

   .logo{
       background:url(images/hat.png) no-repeat;
       width : 400px;
       display:block;
   }
}

/* this logo will be used for everything outside of the above breakpoint */
.logo{background:url(images/logoWhite.png)

Answer 2

You can put both images there inline, and using classes .visible-xs on small logo, for mobile mode, and .hidden-xs class on other (university name) image tag.

.visible-xs - displays ur image on mobile mode and hides on rest of the modes, while .hidden-xs hides the image on mobile mode and displays on rest of modes.