Bootstrap fixed navbar getting stuck - css

Question

I wasn't sure how else to title this but basically what is happening is the navbar seems to be leaving a ghost image of itself. It's fixed and functions otherwise perfectly but after scrolling down on a page, when I scroll back up, it leaves an image on the area of the page that I scrolled down to. The screenshot shows the problem, although I will mention the navbar is white so it's a poor example. When it has color it leaves a colored bar across the page.
I am totally new at web design in every way so please be descriptive when answering. Thanks!
MY BOOTSTRAP CSS:
.container,
.navbar-static-top .container,
.navbar-fixed-top .container,
.navbar-fixed-bottom .container {
width: 940px;
}
.container,
.navbar-static-top .container,
.navbar-fixed-top .container,
.navbar-fixed-bottom .container {
width: 940px;
}
.navbar {
overflow: hidden;
margin-bottom: 0px;
color: transparent;
*position: relative;
*z-index: 2;
}
.navbar-inner {
min-height: 50px;
/* padding-left: 20px; */
padding-right: 20px;
background-color: #ffffff;
/* background-image: -moz-linear-gradient(top, #ffffff, #f2f2f2);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#f2f2f2));
background-image: -webkit-linear-gradient(top, #ffffff, #f2f2f2);
background-image: -o-linear-gradient(top, #ffffff, #f2f2f2);
background-image: linear-gradient(to bottom, #ffffff, #f2f2f2);
background-repeat: repeat-x; */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff2f2f2', GradientType=0);
border: 1px solid #ed4542;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);*/
}
.navbar .container {
width: auto;
}
.nav-collapse.collapse {
height: auto;
}
.navbar .brand {
float: left;
display: block;
padding: 20px 20px 20px;
margin-left: -20px;
font-size: 20px;
font-weight: 200;
color: #555555;
text-shadow: 0 1px 0 #ffffff;
}
.navbar .brand:hover {
text-decoration: none;
}
.navbar-text {
margin-bottom: 0;
line-height: 30px;
}
.navbar-link {
color: #ed4542;
}
.navbar-link:hover {
color: #ed4542;
}
.navbar-form {
margin-bottom: 0;
*zoom: 1;
}
.navbar-form:before,
.navbar-form:after {
display: table;
content: "";
line-height: 0;
}
.navbar-form:after {
clear: both;
}
.navbar-form:before,
.navbar-form:after {
display: table;
content: "";
line-height: 0;
}
.navbar-form:after {
clear: both;
}
.navbar-form input,
.navbar-form select,
.navbar-form .radio,
.navbar-form .checkbox {
margin-top: 15px;
}
.navbar-form input,
.navbar-form select,
.navbar-form .btn {
display: inline-block;
margin-bottom: 0;
}
.navbar-form input[type="image"],
.navbar-form input[type="checkbox"],
.navbar-form input[type="radio"] {
margin-top: 3px;
}
.navbar-form .input-append,
.navbar-form .input-prepend {
margin-top: 6px;
white-space: nowrap;
}
.navbar-form .input-append input,
.navbar-form .input-prepend input {
margin-top: 0;
}
.navbar-static-top {
position: static;
width: 100%;
margin-bottom: 0;
}
.navbar-static-top .navbar-inner {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
.navbar-fixed-top,
.navbar-fixed-bottom {
position: fixed;
right: 0;
left: 0;
z-index: 1030;
margin-bottom: 0;
}
.navbar-fixed-top .navbar-inner,
.navbar-fixed-bottom .navbar-inner,
.navbar-static-top .navbar-inner {
border: 0;
}
.navbar-fixed-top .navbar-inner,
.navbar-fixed-bottom .navbar-inner {
padding-left: 0;
padding-right: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
.navbar-static-top .container,
.navbar-fixed-top .container,
.navbar-fixed-bottom .container {
width: 1200px;
}
.navbar-fixed-top {
top: 0;
}
.navbar-fixed-top .navbar-inner,
.navbar-static-top .navbar-inner {
/* -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.1), 0 1px 10px rgba(0,0,0,.1);
-moz-box-shadow: inset 0 -1px 0 rgba(0,0,0,.1), 0 1px 10px rgba(0,0,0,.1);
box-shadow: inset 0 -1px 0 rgba(0,0,0,.1), 0 1px 10px rgba(0,0,0,.1); */
}
.navbar-fixed-bottom {
bottom: 0;
}
.navbar-fixed-bottom .navbar-inner {
/* -webkit-box-shadow: inset 0 1px 0 rgba(0,0,0,.1), 0 -1px 10px rgba(0,0,0,.1);
-moz-box-shadow: inset 0 1px 0 rgba(0,0,0,.1), 0 -1px 10px rgba(0,0,0,.1);
box-shadow: inset 0 1px 0 rgba(0,0,0,.1), 0 -1px 10px rgba(0,0,0,.1); */
}
.navbar .nav {
position: relative;
right: 0;
display: block;
float: right;
margin: 0;
}
.navbar .nav.pull-right {
float: right;
}
.navbar .nav > li {
float: left;
margin-top: 10px;
}
.navbar .nav > li > a {
float: none;
vertical-align: middle;
padding: 20px 10px 20px;
color: #555555;
font-family: 'Lora', serif;
text-transform: uppercase;
text-decoration: none;
text-shadow: 0 1px 0 #ffffff;
}
.navbar .nav > li > a:focus,
.navbar .nav > li > a:hover {
background-color: #transparent;
color: #7095eb;
text-decoration: none;
}
.navbar .nav > .active > a,
.navbar .nav > .active > a:hover,
.navbar .nav > .active > a:focus {
color: #ed2b28;
text-decoration: none;
background-color: #transparent;
-webkit-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
-moz-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
}

Answer 1

Third section from the top has the overflow hidden, should be visible.
.navbar {
overflow: visible;
margin-bottom: 0px;
color: transparent;
*position: relative;
*z-index: 2;
}