<div class="navbar-wrapper">
    <div class="container-fluid">
        <nav class="navbar navbar-inverse navbar-static-top">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <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 id="logo" src="http://www.thinkliz.com/dev/midtownaustin/img/midtown-church-austin-logo-white-vector.svg" class="img-responsive"></a>

                </div>
                <div id="navbar" class="navbar-collapse collapse">
                    <ul class="nav navbar-nav navbar-right">
                        <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Connect <span class="caret"></span></a>

                            <ul class="dropdown-menu">
                                <li><a href="#">sunday mornings</a>

                                </li>
                                <li><a href="#">midtown communities</a>

                                </li>
                                <li><a href="#">college ministry</a>

                                </li>
                                <li><a href="#">contact us</a>

                                </li>
                            </ul>
                        </li>
                        <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">I'm New <span class="caret"></span></a>

                            <ul class="dropdown-menu">
                                <li><a href="#">to faith</a>

                                </li>
                                <li><a href="#">to church</a>

                                </li>
                                <li><a href="#">to austin</a>

                                </li>
                            </ul>
                        </li>
                        <li><a href="#">Who We Are</a>

                        </li>
                        <li><a href="#">Resources</a>

                        </li>
                        <li><a href="#">Give</a>

                        </li>
                    </ul>
                </div>
                <!--/.nav-collapse -->
            </div>
        </nav>
    </div>
</div>

/* CUSTOMIZE THE NAVBAR
-------------------------------------------------- */
 .navbar-wrapper {
    position: absolute;
    top: 20px;
    right: 0;
    left: 0;
    z-index: 20;
}
.logo {
    margin-top: -42px;
}
.navbar-brand img {
    height: 290px;
    max-height: 130px;
    margin-top: -55px;
}
nav.navbar.shrink, .shrink .dropdown {
    min-height: 35px;
    max-height: 80px;
}
nav.shrink a {
    padding-top: 29px;
}
nav.shrink .navbar-brand img {
    height: 290px;
    max-height: 70px;
    margin-top: -25px;
}
nav.shrink .navbar-toggle {
    padding: 8px 8px;
    margin: 24px 15px 8px 0;
}
/* RESPONSIVE CSS
-------------------------------------------------- */
 @media (max-width: 768px) {
    .navbar-brand img {
        max-height: 70px;
        margin-top: -60px;
    }
    /* THIS IS WHAT IS BREAKING THE NAV */
    .navbar {
        min-height: 80px;
        max-height: 80px;
    }
    .navbar-toggle {
        margin-top: 23px;
    }
}