Streaming live at 10am (PST)

Fixed navigation moving when scrolling


#1

hey guys!
i have a problem with the subnavigation on the middle right of the website i am working on. it is positioned as fixed and works like it should in 90% of the cases. but with some combinations of browser and operating system (chrome 48.0.2564.97 M and windows 8.1 for example) the navigation is being positioned absolute over the whole page and moves when scrolling. is anyone of you aware of these problems? and is there a workaround to fix this?

thank you!
jaro


here is my public share link: link
here is the site: link


#2

You cannot give an element 50% top, because the body height is more than window height.

  1. Create another wrapper div. Give it 100vh height, fixed 0 auto 0 0, z-index 999.

  2. Move your existing nav inside. Set it to absolute instead.


#3

thank you so much man! that did it! :blush:

edit: it did not..


#4

it did not.. please have a look by yourself. it works in safari, but not in chrome..

thank you!


#5

It is working. However, something is making it opacity 0. Delete all your interactions to make it work.


#6

no, thats how i want it. the side navigation bar should only appear when scrolling down. even after deleting all my interactions the problem remains. it moves when scrolling and doesn't stay fixed. please try it in chrome.


#7

Hey @buntestrahlen lovely site, I love it! I was taking a look and it looks like the side navigation wrapper didn't have a width. Maybe try adding a width to this component and then republish the site?

If this doesn't resolve the issue maybe try duplicating & re-publishing the site and see if the issue is still persisting on the duplicated version of the site. Hope this helps! :)


#8

hey waldo! thank you for your nice words. :sunny:

i tried both (adding a width and duplicating the site). still nothing. in chrome the navbar moves as if it was positioned absolute not fixed. which is strange because in the designer preview window it moves as it should. and on the published site it does not. even when i remove all my custom code.

why can't i just remove the wrapper and position the navbar itself as fixed? i thought that is how fixed elements work. aren't they positioned over the viewport? as @samliew told me they are not. they are positioned over the whole page. why is that so in different browsers? am i missundersanding css here?

thanks for clearing up!
jaro


#9

Because:

  1. You were setting the height to 100%. Of the parent, which was the document height instead of the window height.

  2. You were repositioning the children div to 50% of top, which was 50% of the document height, making the div always out of the window.


#10

but isn't that how absolute positioning works? i thought fixed positioning was made to exactly achieve what i wanted. it does not refer to the parent size but to the window height. maybe i am wrong. if so, please correct me! :blush:


#11

Hey @buntestrahlen so I was able to get it to work when I removed all of the custom code that you have in the <head></head> tags :smiley:

So maybe try going line by line removing the custom code in the head tags to see which code is interfering with the element.

Looks like when I remove this bit of code it resolved the issue:

body {
    
-webkit-backface-visibility: hidden;
-moz-backface-visibility:    hidden;
-ms-backface-visibility:     hidden;

-webkit-transform-style: preserve-3d;

}

#12

thank you so much waldo!!! that did it!

:sunny:


#13

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.