Sticky top navbar without having the logo resize - html

Question

I have the following code:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="row">
<nav class="col-sm-6">
<span class="pull-left">
<a href="#" class="navbar-left">
<img src="img/gyn.png" alt="" class="logo">
</a>
</span>
</nav>
<nav class="col-sm-6">
<span class="pull-right">
<ul class="nav navbar-nav thmbl">
<li><a class="tupac" href="#team"><strong>TEAM</strong></a></li>
<li><a class="tupac" href="#services"><strong>SERVICES</strong></a></li>
<li><a class="tupac" href="#gal"><strong>GALLERY</strong></a></li>
<li><a class="tupac" href="#location"><strong>LOCATION</strong></a></li>
</ul>
</span>
</nav>
</div>
</div>
</nav>
For the life of me I can't understand why the logo is displaying at full size and not being contained in the Navbar. I basically want the logo on the left and my menu items on the right. Moreover, I want them to always be on the samle line, i.e. when I resize the windows (or on a smaller screen like an iPhone for example), it scales down. Maybe I have tunnel vision but can anyone perhaps point out the problem?

Answer 1

Can't say for sure without looking at your css, but images will only be resized if the logo class is configured correctly. You may want to look at this example https://codepen.io/bootstrapped/pen/KwYGwq on how to configure css properly.
For what concerns wrapping, the default behaviour is to wrap especially as you are dividing the screen in 2 columns when small. An option is to play around with CSS (see How to make bootstrap 3 navbar not wrap). Alternatively, play with column sizing so that a small logo doesn't take half screen real estate and the menu items are scaled correctly. For very small screen, the best option is to collapse and show a vertical menu.
This code from bootply should do what you need:
<div class="container example2">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar2">
<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="http://disputebills.com"><img src="https://res.cloudinary.com/candidbusiness/image/upload/v1455406304/dispute-bills-chicago.png" alt="Dispute Bills">
</a>
</div>
<div id="navbar2" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container-fluid -->
</nav>
</div>
and this is the CSS
.navbar-brand {
padding: 0px;
}
.navbar-brand>img {
height: 100%;
padding: 15px;
width: auto;
}
/* EXAMPLE 2 (larger logo) - simply adjust top bottom padding to make logo larger */
.example2 .navbar-brand>img {
padding: 7px 15px;
}
/* CSS Transform Align Navbar Brand Text ... This could also be achieved with table / table-cells */
.navbar-alignit .navbar-header {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
height: 50px;
}
.navbar-alignit .navbar-brand {
top: 50%;
display: block;
position: relative;
height: auto;
transform: translate(0,-50%);
margin-right: 15px;
margin-left: 15px;
}
.navbar-nav>li>.dropdown-menu {
z-index: 9999;
}
body {
font-family: "Lato";
}