0

I believe that when setting position:fixed on an item (say navbar) and body has position:relative; left:150px;, the item fixed has no idea what it it's supposed to do.

From my understanding, position:fixed was fixed based on the window. If that is true, then body with left shouldn't effect the position of the sticky menu.

A button triggers the push of body and a menu comes out from the left. When closed, the body slides back into place.

In Firefox, this works perfectly, as I have coded it.

In Chrome, the navbar moves to the right as intended, and the sticky menu moves with it, but when you close the push menu, the fixed navbar stays in place. Hovering over it can fix it sometimes, resizing window always fixes it. I tried adding a class to the code that forced it to the left. It generally speaking, kind of worked.

In Safari, as soon as you scroll with the push menu open, the navbar jumps back to the left wall and does NOT behave as expected.

Here is a JSFiddle demonstrating the issue.

Is there a way to push the page without effecting fixed elements?

What is required to resolve this issue?

Thank you.

Jacob Raccuia
  • 1,666
  • 1
  • 16
  • 25

1 Answers1

1

ey,

change:

.cbp-spmenu-push {
    overflow-x: hidden;
    position: relative;
    left: 0;
}

to:

.cbp-spmenu-push {
    overflow-x: hidden;
    position: absolute;
    left: 0;
}
jaakkoj
  • 121
  • 6
  • this clearly, without a doubt, fixed the demo. I now need to find out how to apply this to my actual site.....Will check in shortly! thanks so much! – Jacob Raccuia Sep 26 '14 at 21:42
  • no problem. i think applying transition only to "left" instead of "all" might be good idea also. – jaakkoj Sep 26 '14 at 21:53
  • so in my actual site, as soon as I change the position to absolute, the overflow-x in chrome does not work. So the nav no longer "hangs" on the page, but then you can scroll left and right. adding `overflow-x:hidden;` on `html` did not fix anything. – Jacob Raccuia Sep 28 '14 at 16:04
  • what happens if you just forget the last fix i suggested and add 'position: absolute;' to html? – jaakkoj Sep 29 '14 at 13:20
  • also if you have something like 'width: 100%' set for your 'body{}', that might cause some issues. – jaakkoj Sep 29 '14 at 13:40
  • in my actual code, the .cbp-spmenu-push is applied to the body. when I add it, I need to give width:100% in order for content to display properly, so, yes, it appears to be causing issues. Adding absolute to html didn't make a difference. ( note everything still works perfectly in firefox with any of these changes...) – Jacob Raccuia Sep 29 '14 at 14:54
  • well what im thinking is that its pretty weird that it doesnt work and what is the actual difference in your css compared to the fiddle. Maybe you can check stuff like inheriting and see how applying that class to the body affects rest of the elements... unless you got it working already ofc. – jaakkoj Oct 01 '14 at 10:12
  • I did indeed resolve it, albeit by adding and removing classes to the messed up elements and controlling their position that way. Not a good fix. I am going to mark your question since you did indeed resolve the issue I posted :) – Jacob Raccuia Oct 01 '14 at 13:44