When the navbar is in a fixed position, the margin top of the logo doesn't work correctly. The attached image shows that when scrolling down, it disappears https://i.sstatic.net/JNog6.jpghttps://i.sstatic.net/S5AJ5.jpg
<div class="container">
<div class="row number">
<div class="col-sm-5 col-xs-3">
</div>
<div class="col-sm-2 col-xs-2">
</div>
<div class="col-sm-5 col-xs-7">
<h2>Call Us Today<br>
<a href="tel:+1-778-233-0368">604-729-3864</a></h2>
</div>
</div>
</div>
<nav class="navbar navbar-inverse" role="banner">
<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>
<nav>
<%= link_to root_path do %><%= image_tag "plumbertodaylogo.png",alt: "plumber-today-logo",class: "logo"%><% end %>
</nav>
</div>
<div class="collapse navbar-collapse navbar-right">
<ul class="nav navbar-nav">
<li class="active"><%= link_to "Home", root_path %></li>
<li><%= link_to "About Us",about_path %></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Plumbing <i class="fa fa-angle-down"></i></a>
<ul class="dropdown-menu">
<li><a href="blog-item.html">Repipe/ Burst pipes</a></li>
<li><a href="pricing.html">Leak Detection</a></li>
<li><a href="404.html">Fixture repair & Installation</a></li>
<li><a href="shortcodes.html">Garbage Disposal Services</a></li>
<li><a href="shortcodes.html">Hot Later Tanks</a></li>
<li><a href="shortcodes.html">Watermains</a></li>
<li><a href="shortcodes.html">Sump & Pump services</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Drainage <i class="fa fa-angle-down"></i></a>
<ul class="dropdown-menu">
<li><a href="blog-item.html">Drain cleaning pipes</a></li>
<li><a href="pricing.html">Sewer Main</a></li>
<li><a href="404.html">Clogged toilet Services</a></li>
<li><a href="shortcodes.html">Draintile Services</a></li>
<li><a href="shortcodes.html">Camera Inspection</a></li>
<li><a href="shortcodes.html">Hydrojetting</a></li>
</ul>
</li>
<li><a href="portfolio.html">Service Areas</a></li>
<li><a href="blog.html">Reviews</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="coupons.html">coupons</a></li>
<li><%= link_to "Contact" ,new_contact_path %></li>
</ul>
</div>
</div><!--/.container-->
</nav><!--/nav-->
Javascript file
$(window).scroll(function(e){
var $el = $('.navbar');
var isPositionFixed = ($el.css('position') == 'fixed');
if ($(this).scrollTop() > 200 && !isPositionFixed){
$el.css({'position': 'fixed', 'top': '0px'});
$('.logo').css({'margin-top': '-10px','width': '10px'});
}
if ($(this).scrollTop() < 200 && isPositionFixed){
$el.css({'position': 'static', 'top': '0px'});
$('.logo').css({'margin-top': '-110px','width': '150px'});
}
});
CSS
.navbar {
border-radius: 0;
margin-bottom: 0;
background: white;
padding: 0px 0;
padding-bottom: 0;
position: fixed;
z-index: 100;
width:100%;
}
.logo{
margin-top: -110px;
width: 150px;
}