Nav Bar isssues

Hi everyone,
I’m doing a refresh on my website and I’m running into a strange issue with the nav bar on all the pages except for the home page which is fine. As you scroll down on the pages some of the content covers up the nav bar, I think I’ve narrowed it down to the Mask stack but I’m not sure how to fix it. Looking for some input. Thanks, here’s a link to the site if you want to take a look. https://www.asjdesigns.com

Thanks again

Can I only have one Mask stack on a page?, if so then that’s most likely my problem.

The issue with the navbar looks like it’s most likely a z-index thing. I would add though that on mobile at least, you have further issues with positioning of the navbar, and a couple of other things too.

That’s mobile on Android, not look at it on an iPhone.

1 Like

@arlenj It looks like you’re inserting your navigation inside of the Mask stack and using Sticky Navigation. This works with most things like Banners and the Backdrop stack, but Mask achieves its layered effects by setting a negative z-index on at least one of its elements. This means anything inside that stack also gets the negative z-index applied to it as well. Even if you set the navigation’s z-index to 100,000 it will still be below other elements on the page. I discuss this a bit more in this post, but since it is pretty long I’ll just link you to it.

Needless to say this is your issue I suspect. You could circumvent this by using the navigation outside of the Mask stack, or using a different stack for your banner area on your page.

1 Like

You can have multiple Mask stacks on a page.

1 Like

Hey Adam,
Yes I did have the Nav inside a mask which wasn’t an issue until I put another mask stack on that same page. I’m using the Banner Six Group template which contains the nav, image and mask along with some text and header boxes. If I move the nav outside the mask I lose the affect of the nav being part of the image which is inside the mask stack. For now I just removed the other mask stacks that I had on each page and everything looks and functions the way it should.

This relates to the compartmentalizations of the z-indexes. Other elements with z-indexes applied, such as your secondary Mask stack, will cause this same thing to happen. So just be aware of that for the future.

2 Likes

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