Sticky Nav - elements show on top of...

User 2015735 Photo


Registered User
3 posts

Using Site Designer 4.0 Build 3285 w Foundation 6.6.3

Built a sticky nav menu. Works great on mobile view and on desktop. The problem is on desktop, containers under the nav menu scroll under the nav menu but other elements in those containers are scrolling on top of the nav menu. I have it set to fixed w z-index of 999.

Any ideas what I am doing wrong?

See attached images.
Attachments:
Dustin
User 2699991 Photo


Registered User
3,244 posts
Online Now

Try a higher z index and make sure the menu container has a solid colour background.

The Help You Need: When You Need It The Most
Website Design & Development
Website Renovations
Wayans' Theme Park
Watch Listen & Learn Video Tutorials
User 122279 Photo


Senior Advisor
13,369 posts
Online Now

We might get some ideas if we were able to see your project file. Just an image doesn't tell what you may have done wrong.
Ha en riktig god dag!
Inger, Norway
This site was made before we were able to create components through the app:
Component sharing for RFF, RBB, RSD and SD: https://eikweb.com/sharing/
My work in progress right now:
Components for the same as above + HTML Editor: https://mock-up.coffeecup.com


User 2699991 Photo


Registered User
3,244 posts
Online Now

I would almost guarantee it's the Z index not high enough

I can see from the image, that the menu has a solid colour, so it has to be the z index,, put it up very high

The Help You Need: When You Need It The Most
Website Design & Development
Website Renovations
Wayans' Theme Park
Watch Listen & Learn Video Tutorials
User 122279 Photo


Senior Advisor
13,369 posts
Online Now

Maybe you're right. But it depends on the other elements, and how much they have in z-index. And if the z-index has been added to the right element(s).
Ha en riktig god dag!
Inger, Norway
This site was made before we were able to create components through the app:
Component sharing for RFF, RBB, RSD and SD: https://eikweb.com/sharing/
My work in progress right now:
Components for the same as above + HTML Editor: https://mock-up.coffeecup.com


User 2699991 Photo


Registered User
3,244 posts
Online Now

so why not just try it with a high Z index first if it works then no need upload the project file, if doesn't work then send the project file

Make sure the z index is applied to the container "class = nav region" and check the sub-containers too

The Help You Need: When You Need It The Most
Website Design & Development
Website Renovations
Wayans' Theme Park
Watch Listen & Learn Video Tutorials
User 379556 Photo


Registered User
1,158 posts

It seems that this relates to https://paula-abdul.com/ , and getting the two buttons (Press Release and Commercial) not to scroll over the top of the navigation menu when it's set to position-fixed. Unless other parts of the page have changed, all the z-indexes of other parts of the page seem negative.

If the advice already given doesn't do the trick, it seems possible that one of the reasons at https://coder-coder.com/z-index-isnt-working/ might prove relevant, and it might be worth checking those.

Frank
User 2015735 Photo


Registered User
3 posts

The z index was not applied to the container "class = nav region" and once I fixed this, it works!

Thanks all.
Dustin

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.