Section Content appears above nav bar as i scroll

Design help General
1

Hi All,

I’ve been practising the ‘nav appears as you scroll’ according to webflow’s tutorial.
It took me some time but at the end i managed to work it out(by the way because of a little small detail related to the position of the nav bar ,it needs to be Fixed & Top in the position properties).
Now i have a problem ,please take a look here:

https://webflow.com/design/gagaaaa?preview=2f70de21f95a56e26728042d486f356e

The nav appears on scroll after the first section and disappear accordingly but when it reaching the 2nd section all the text and images of the section goes above the nav bar.
What should i do?

Thanks in advance,
Guy

2
  1. http://forum.webflow.com/t/how-to-enable-a-webflow-projects-public-link/2573/10
  2. Share a published link as well if possible
3

Thnaks,i just enabled the publick link.

1 Like
4

It’s a z-index issue of your navbar. Select your NavBar and change the z-index value to 99. Should do the trick.

4 Likes
5

Thanks,it worked.

Can you share your wisdom a bit about the z-index,what is it for?

Best,
Guy

6

Got it here:

Z-Index

The z-index is in essence the use of layering on the web. If one object is below another due to the order in which the site was built, one could move it to the front of view by giving it a higher z-index (as a default, objects are given a z-index of 0).

A common use case for z-index would be to place a high z-index value on objects that you always want higher/above the rest of your content. A prime example would be a fixed nav, in which you would always want to above the rest of the content as it goes down the page.

7

Sure ;). A browser is 3 dimmensional. It has height, width and depth. he first two - height and width - represent the place on the website. The z-index value tells the depth of the website. Normally all objects are on the same level (by default) and the overlap over the parent object. There might be some things that you want to be on top of all of the rest. The z-index is the one you should change. The higher the value, object will appear on top of another with lower value.

Depth of the Website might be better represented thanks to the Firefox 3D View. Take a look at those websites :)

webflow.com:

1206×966 421 KB

overtongraphics.com:

961×959 604 KB