Sticky Nav - elements show on top of...

Oct 28th, 2020 at 11:20 AM
User 2015735 Photo

Dustin Drorbaugh
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
Oct 28th, 2020 at 11:26 AM
User 2699991 Photo

Wayan Jaya
Registered User
4,817 posts
Online Now

Try a higher z index and make sure the menu container has a solid colour background.
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … uman-lina/
Oct 28th, 2020 at 11:29 AM
User 122279 Photo

Inger
Senior Advisor
14,461 posts

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

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Oct 28th, 2020 at 11:43 AM
User 2699991 Photo

Wayan Jaya
Registered User
4,817 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
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … uman-lina/
Oct 28th, 2020 at 11:48 AM
User 122279 Photo

Inger
Senior Advisor
14,461 posts

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

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Oct 28th, 2020 at 11:57 AM
User 2699991 Photo

Wayan Jaya
Registered User
4,817 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
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … uman-lina/
Oct 28th, 2020 at 01:35 PM
User 379556 Photo

Frank Cook
Registered User
1,535 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
Oct 28th, 2020 at 01:41 PM
User 2015735 Photo

Dustin Drorbaugh
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.