Please help resize and move logo on my website - html

Question

My website is georgiantoast.com
When I run it from of my desktop the logo is the appropriate size and fits neatly into the upper left corner. However, when I upload index.html to my hosting service it balloons to the entire page. This is the code:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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="#page-top">
<img id="logo" src="img/portfolio/logo1.png" class="img-responsive" alt=""></a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="hidden">
</li>
<li class="page-scroll">
OUR WINES
</li>
<li class="page-scroll">
ABOUT US
</li>
<li class="page-scroll">
WHERE TO BUY
</li>
</ul>
</div>
<!--/.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
css code:
#media(min-width:768px) {
.navbar-fixed-top {
padding: 25px 0;
-webkit-transition: padding .3s;
-moz-transition: padding .3s;
transition: padding .3s;
}
.navbar-fixed-top .navbar-brand {
font-size: 2em;
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
}
.navbar-fixed-top.navbar-shrink {
padding: 10px 0;
}
.navbar-fixed-top.navbar-shrink .navbar-brand {
font-size: 1.5em;
}
#logo {
height: 400%;
margin-top: -35px;
}
.navbar {
text-transform: uppercase;
font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
font-weight: 700;
}
.navbar a:focus {
outline: 0;
}
.navbar .navbar-nav {
letter-spacing: 1px;
}
.navbar .navbar-nav li a:focus {
outline: 0;
}
.navbar-default,
.navbar-inverse {
border: 0;
}
}

Answer 1

This should be ringing some bells.
#logo {
height: 400%;
}
This is a fairly obvious problem. Use Firefox or Chrome, summon developer mode, and inspect your img. Then you can see the css classes that it's using. I couldn't find your #logo defined in any css file, but here's what else i found using that strategy.
.img-responsive{
max-width:100%;
height: auto;
}
Change max-width to around 20%.

Answer 2

I would use this approach for styles (changed only .navbar-fixed-top .navbar-brand, .navbar-fixed-top .navbar-nav sections):
.navbar-fixed-top {
-webkit-transition: padding .3s;
-moz-transition: padding .3s;
transition: padding .3s;
}
.navbar-fixed-top .navbar-brand {
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
border: 1px solid red;
width: 100%;
padding: 0px;
height: 60px;
margin-top: 5px;
margin-bottom: 5px;
}
.navbar-fixed-top .navbar-nav {
margin-top: 10px;
margin-bottom: 10px;
}
.navbar-fixed-top.navbar-shrink .navbar-brand {
margin-top: 0px;
margin-bottom: 0px;
}
.navbar-fixed-top.navbar-shrink .navbar-nav {
margin-top: 5px;
margin-bottom: 5px;
}
.navbar-fixed-top .navbar-brand #logo {
height: 100%;
}
I.e. paddings moved into enclosed navbar-brand and navbar-nav element. I used 20/10px offset for normal/shrink state instead yours 25/20px -- you can tune it yourself. Also navbar-brand fixed to 60 px, img#logo scaled up to 100% -- may be fix it too to 60px of height. I do not quite understand why it was done responsive. Not really needed in navbar.

Answer 3

Your site (georgiantoast.com) doesn't seem to have the same CSS as you posted in your question. Specifically dealing with #logo. With regards to the logos size you need to either move it out of the media query so when the viewport is reduced it doesn't expand or add additional rules (and I would not use img-responsive under these conditions)
Work Snippet Example.
body {
padding-top: 100px;
}
.navbar.navbar-fixed-top {
padding: 25px 0;
-webkit-transition: padding .3s;
-moz-transition: padding .3s;
transition: padding .3s;
text-transform: uppercase;
font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 700;
border: 0;
background: white;
}
.navbar a:focus {
outline: 0;
}
.navbar .navbar-nav {
letter-spacing: 1px;
}
.navbar .navbar-nav li a:focus {
outline: 0;
}
.navbar #logo {
height: 90px;
margin-top: -35px;
font-size: 2em;
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
}
#media(min-width:768px) {
.navbar.navbar-shrink {
padding: 10px 0;
}
.navbar.navbar-shrink .navbar-brand {
font-size: 1.5em;
}
header .container {
padding-top: 150px;
padding-bottom: 150px;
}
header .intro-text .name {
font-size: 2.75em;
}
header .intro-text .skills {
font-size: 2.75em;
}
}
#media(max-width:767px) {
.navbar .navbar-collapse {
margin-top: 30px;
margin-bottom: -30px;
border: none;
}
}
header {
text-align: center;
color: #fff;
width: 100%;
background-size: cover;
background-image: url("https://upload.wikimedia.org/wikipedia/commons/b/b4/Niko_Pirosmani._Vintage._1906._Oil_on_oilcloth._125X301.5_cm.jpg");
height: 500px;
}
.divider {
width: 250px;
}
header .container {
padding-top: 100px;
padding-bottom: 100px;
}
header img {
display: block;
margin: 0 auto 20px;
}
header .intro-text .name {
display: block;
text-transform: uppercase;
font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 2em;
font-weight: 700;
}
header .intro-text .skills {
font-size: 1.25em;
font-weight: 300;
}
#media (max-width: 380px) {
.navbar #logo {
height: 60px;
margin-top: -20px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <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="#page-top">
<img id="logo" src="http://georgiantoast.com/img/portfolio/logo1.png" alt="">
</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="hidden">
</li>
<li class="page-scroll"> OUR WINES
</li>
<li class="page-scroll"> ABOUT US
</li>
<li class="page-scroll"> WHERE TO BUY
</li>
</ul>
</div>
</div>
</nav>
<header>
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="intro-text"> <span class="name">"The Cradle of Wine"</span>
<hr class="divider"> <span class="skills"> Georgia is the birthplace of wine and home to over 500 indigenous grape verities. </span>
</div>
</div>
</div>
</div>
</header>
Your code withe #logo moved outside the media query.
#media(min-width:768px) {
.navbar-fixed-top {
padding: 25px 0;
-webkit-transition: padding .3s;
-moz-transition: padding .3s;
transition: padding .3s;
}
.navbar-fixed-top .navbar-brand {
font-size: 2em;
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
}
.navbar-fixed-top.navbar-shrink {
padding: 10px 0;
}
.navbar-fixed-top.navbar-shrink .navbar-brand {
font-size: 1.5em;
}
.navbar {
text-transform: uppercase;
font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 700;
}
.navbar a:focus {
outline: 0;
}
.navbar .navbar-nav {
letter-spacing: 1px;
}
.navbar .navbar-nav li a:focus {
outline: 0;
}
.navbar-default,
.navbar-inverse {
border: 0;
}
}
#logo {
height: 400%;
margin-top: -35px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <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="#page-top">
<img id="logo" src="http://georgiantoast.com/img/portfolio/logo1.png" class="img-responsive" alt="">
</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="hidden">
</li>
<li class="page-scroll"> OUR WINES
</li>
<li class="page-scroll"> ABOUT US
</li>
<li class="page-scroll"> WHERE TO BUY
</li>
</ul>
</div>
<!--/.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>