CODEWITHSUNDEEP
javascriptjqueryhtmlcsssticky
Harsha M V
Harsha M V

Reputation: 54949

jQuery Sticky Header displacing the page content

I am using jQuery Sticky header in my theme. It seems to work fine in most of the pages but in two pages it is displacing the content to the right on load and on scrolling down it places it back in the right position. i am trying to debug the issue with no results.

On Page Load enter image description here

On Scroll enter image description here

DEMO Link

Upvotes: 1

Views: 1062

Answers (4)

Roumelis George
Roumelis George

Reputation: 6746

Used "clear:both" on .page

.page {
  clear: both;
}

The problem is that the #nav is overflowing out of your header and pushes the page to the right side.

Upvotes: 1

vrajesh
vrajesh

Reputation: 2942

<div style="height: 50px;" class="sticky-wrapper" id="undefined-sticky-wrapper"></div>
<!--- PLEASE INCLUDE  -->
<div style="clear:both"></div>

put style="clear:both" after header main div (#undefined-sticky-wrapper)

Upvotes: 2

Leon
Leon

Reputation: 2149

Adding this will fix the problem:

.page {
    width:100%;
}

Upvotes: 4

kapantzak
kapantzak

Reputation: 11750

Try removing overflow: hidden from .page at your css

.page {
   overflow: visible
}

Upvotes: 2

Related Questions