Fixed header with panels plugin

[ajlkn]

Fixed header with panels plugin

[ajlkn]

Add the class "skel-panels-fixed" to your element. Should do the trick.

[cpq]

That actually moves the element to the bottom of the page, cause fixedWrapper follows pageWrapper, and both have position: relative

[ajlkn]

That's a workaround to get fixed elements working on webkit when CSS
transforms are enabled. The parent wrapper is indeed relative, but the
elements inside are set to position: fixed. If they're not, something
else must be going on.

On 12/12/2013 5:39 PM, Sergey Lyubka wrote:

That actually moves the element to the bottom of the page, cause fixedWrapper follows pageWrapper, and both have position: relative

---

Reply to this email directly or view it on GitHub:
#29 (comment)

[gilesbutler]

Just to add a note to this as I had the same issue and to make it clear for other people.

You have to add the following styles to the element your trying to position at the top:

position: fixed;
top: 0;

As far as I can see the class 'skel-panels-fixed' doesn't actually apply any fixed positioning to your elements its just a hook for the JS to setup the wrapper for fixed positioning. Please correct if thats wrong @n33

[ajlkn]

Yup, that's correct. The class just tells panels to move it to the fixed
wrapper.

On 1/7/2014 7:58 PM, Giles Butler wrote:

Just to add a note to this as I had the same issue and to make it
clear for other people.

You have to add the following styles to the element your trying to
position at the top: position: fixed; top: 0; As far as I
can see the class 'skel-panels-fixed' doesn't actually apply any
fixed positioning to your elements its just a hook for the JS to
setup the wrapper for fixed positioning. Please correct if thats
wrong @n33

--- Reply to this email directly or view it on GitHub:
#29 (comment)

[gilesbutler]

Thanks for confirming @n33 . I am experiencing one issue though, so I've created a navbar for a mobile site, the typical sort of one you see on all mobile sites e.g iOS app style header.
I have it set to 100% width and when I activate a side panel it jumps across the page rather than animating with the rest of the content. Is this a webkit issue or is it missing a transition somewhere?

Thanks

[ajlkn]

Hmm. Try recreating it as an overlay (using the panels plugin).

On 1/7/2014 10:17 PM, Giles Butler wrote:

Thanks for confirming @n33 . I am experiencing one issue though, so
I've created a navbar for a mobile site, the typical sort of one you
see on all mobile sites e.g iOS app style header. I have it set to
100% width and when I activate a side panel it jumps across the page
rather than animating with the rest of the content. Is this a webkit
issue or is it missing a transition somewhere?

Thanks

--- Reply to this email directly or view it on GitHub:
#29 (comment)

[gilesbutler]

That got it. Thanks @n33