How to resolve soon being shown in half

Question

I have a page where I’m positioning the logo of the company, the positioning is getting correct, but the same is being displayed cortado I’ve seen my css and I couldn’t solve it, what I’m doing is showing the logo with a larger size when the page does not scroll and a smaller image when scrolling, I have done so far:

CSS of logo and scrolling:

.logo { 
    position:absolute;
    top:0;
    left:0;
    bottom:0px;
    width:185px;
    z-index:10000;

}

.large-logo {display:block;}
.scrolling-logo {display:none;}
.scrolling .large-logo {display:none;}
.scrolling .scrolling-logo {display:block;}

.navbar-brand {
    position: relative;
    padding: 27px 0;
    margin: 0!important;
    transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
}

The div da logo is like this:

          <div class="logo img-responsive col-md-4">
      <a class="navbar-brand large-logo" href="index.php"><img src="images/anc.fw.png" /></a>
      <a class="navbar-brand scrolling-logo" href="index.php"><img src="images/anc.small.fw.png" /></a>          
      </div>

I have a .js linked:

$(window).scroll(function(){
    if ( $(window).scrollTop() > 30 ) {
      $('.logo').addClass('scrolling');
    } else {
      $('.logo').removeClass('scrolling');
  }
});

The project page can be viewed here: Project

Answer 1

There are some Ivs above your logo, so it’s cutting. See this by applying a float:right to the following Ivs:

• The menu . navbar . navbar-default . navbar-top
• In the container below the menu
• And no . navbar-Collapse . Collapse

A snippet I always use in these cases is this:

[].forEach.call($$("*"),function(a){a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16)})

It puts an Outline in all elements which facilitates the visualization of possible overlaps.