CODEWITHSUNDEEP
csshtmltwitter-bootstrap
Nick
Nick

Reputation: 141

Absolutely positioned logo in header scrolls with page

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.

Upvotes: 1

Views: 2569

Answers (4)

Wahab Shah
Wahab Shah

Reputation: 2256

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.

Upvotes: 0

Sieen
Sieen

Reputation: 68

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;
}

Upvotes: 0

Sagar
Sagar

Reputation: 538

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;
}

Upvotes: 1

random_user_name
random_user_name

Reputation: 26160

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.

Upvotes: 2

Related Questions