Absolutely positioned logo in header scrolls with page - css

Question

I have an absolutely positioned logo in the header bar of my page, that keeps moving down the page when scrolled.
I do not want this behavior, I want the logo to stick to the top of the page and not cover other elements when a visitor is scrolling down the page.
Here is the page in question.
www.giracci.com
and the header logo code.
logoWrapper {
float: left;
height: 0;
position: absolute;
top: 0;
width: 150px;
z-index: 30;
}
If you view the page, you'll see that it doesn't stay put, it scrolls with the page.

Answer 1

First:
Copy the relevant HTML and CSS to your question. There's MUCH more to the equation that you have not included. You need to essentially include all the html up to the nav container, as well as the CSS, and indicating that your question includes bootstrap (I've already done that for you).
Second:
The reason that it's exhibiting this behavior is because one of it's containers - the nav#site-navigation - is getting a fixed class applied to it when you scroll, which applies the following styles:
nav.fixed {
position: fixed;
visibility: hidden;
opacity: 0;
}
And, because you are using the bootstrap class of visible-lg on the logo wrapper, it gets this style:
.visible-lg {
display: block !important;
}
Which overrides the .fixed hidden property.
And, because the logo is inside that wrapper, that causes the logo to show up when you don't want it to.
So, you're using colliding classes, and need to straighten them out.

Answer 2

Add this to your css file:
No need to change much of the code.
your navbar is adding fixed class when it is scrolled.
nav.fixed .logoWrapper {
display: none;
}

Answer 3

First of all I would change these parameters in the css to display correctly the nav, to make sure that the menu items do not go below the logo:
.container {
width:auto;
}
.container.nav-bar {
width:auto;
margin:0 60px;
}
After you've done this, if you want to hide everthing when you're scrolling the page (logo and nav), add this to your css:
nav.fixed.scrolled {
display:none;
}
however, if you want that the only logo is fixed when you're scrolling the page add and edit these parameters on the CSS:
.logoWrapper {
position:fixed;
}

Answer 4

There is one more way around you can try. Because currently on your site it disappears at once so it feels like there is kind of a glitch/stutter, very slight. I needed something like this with my logo so I did it with JS. And it works like a charm. Here is the following code:
$(window).scroll(
function () {
var top = 75;
var currentTop = $(window).scrollTop();
if (currentTop > top) {
$(".logo").css("opacity", "0");
} else {
$(".logo").css("opacity", "1");
}
});
Simply replace .logo with your .logowrapper or whatever. Hope it works.