Nav Bar Pro goes under content

Hi all,

Hope you can help.

I’m having issues with Nav Bar Pro going under the content as you scroll down the page…on all the pages except the Home pages…the home page the menu flickers and disappears.

https://motormoversdirectdraft.rapidwebsites.net/motor-movers/
https://motormoversdirectdraft.rapidwebsites.net/caravan-security/
https://motormoversdirectdraft.rapidwebsites.net/caravan-accessories/

It flickers and disappears as you scroll down but this happens only on the Home page.
https://motormoversdirectdraft.rapidwebsites.net

I’ve changed the Nav Bar Pro z index to 9999 and also tried 999 from the original 900 setting but still same issue.

Using RW v8.3 and all stacks are up to date.

Any thoughts please.

Many thanks,
Scott

Home page menu works fine for me. No flickering or disappearing. I see what you mean about the others though.

I’d create a new page, add your Foundry base stack and anything else it needs, then the menu and then copy in the other stacks on the page one at a time. If the first one goes under the menu you know it’s probably a problem with that stack or the menu rather than anything else. If it does work, then add the nest stack and so on.

But the home page is fine here.

Rob

Hi Rob,
Thanks for the quick response.

Good to know that you don’t have issue on the Home page, but I still do…wonder why.

I’ve done as you suggested, removed all and started adding the various stacks I had on the original page and the same thing occurs when I add any stack, even just a plain Foundry Paragraph stack.

So I deleted all and started with a brand new page with the Banner and menu content then added a Container stack and just a Paragraph stack…no changes to them at all…just dragged them in from my Foundry library of stacks.

And same issue, floats over the Nav Bar Pro…

I created a TEST page and have only Foundry stacks on it…it has same issue as other pages.
https://motormoversdirectdraft.rapidwebsites.net/test/

Seems to me like something within Foundry and Nav Bar Pro as no other 3rd party stacks on this page.

Only occurs after you scroll past the Banner stack and into the Paragraph stack.

Any thoughts anyone??

Cheers Scott

I see it. If you want to email the single page as a project I’d be happy to take a look. I have a bit of time before I go out. Might help illuminate what’s going on if I do or don’t see the same thing?

hovewebdesignatgmail.com

Hi Rob,

Great thanks, just sending email with project file now.

Cheers Scott

Morning —

If you include me in the sharing of the project file I’d be glad to have a look too.

So the first thing I notice off the bat is that you have 2 Container stacks in the Banner wrapped around the navigation. They’re both set to the same width and both are set to the same width as the Banner’s containing max-width.

So you don’t need either of them. Banner has this functionality built in already.

With that out of the way, let’s try to discuss the complex nature of z-index.

Compartmentalized Z-Indexes

Z-Index is not a page-wide layering system. The z-index value of any particular item is relative to the z-index of the item it resides inside of.

So let’s lay out an example. Let’s say your Banner has a z-index of 1 and inside of that you place two items. One with a z-index of 100 and one with a z-index of 200. The item that is at 200 will reside at a higher level than the item at the 100 z-index… inside the banner.

Let’s add to this example… Say you have a Container below the Banner on the page and it has a z-index of 2. It has a hight z-index than everything in the Banner because the Banner is at a z-index of 1.

What if the Container is at z-index 1 though? It too would be higher than that of the Banner as well, as it comes after the Banner in the page layout.

Crazy right?

So these compartmentalized z-indexes are what is causing your problem. The way we get around this normally is to use the “Pair with Parent Banner” feature for the navigation.

I realize that this negates the specific layout you’re going for, but I hope it explains what is at work here.

You could get around this by adding a class to your Banner stack and then setting the z-index for that class.

1 Like

Hi Adam,

Thanks, I’ve popped an email out to you with a link to the project file.

Cheers Scott

What for? Not sure I understand. I outlined the problem above.

(That said I did not receive a new email. I only received your original email with your project file, which is how I came to the conclusion I did above.)

Sorry I sent email to wrong address - used noreply