navigation z-index issue

[prman]

This is my first XARA site and first post. I'm having a strange problem with my navigation menu. I have it on the top layer. But when a popup is open the navbar slides under the popup, even though all the popups are on layers lower than the navbar.

You can test this by going to my site (link below), then click on the image of the mirror, and a popup with info about the mirror will appear. Then, leaving the popup open, click on or hover over the hamburger icon. The menu will appear, and if you then select the submenus (such as "MORE" at the bottom) the submenu slides out UNDER the popup (in between the popup and the image of the mirror). I'd like the menu and all the submenus to always appear on top (but not sticky, because I don't want the menu to scroll as the page scrolls).

Can anyone provide some advice? Here's the link to the site:
https://hudsonriverinlay.com/hrixara/

Thank you

[gwpriester]

Welcome to TalkGraphics and congratulations on the site. Very classy and elegant.

What happens if you make the banner and menu sticky? This might eliminate the problem but it will keep the menu and title bar at the top of the page.

You could add a white rectangle behind the site title and make it 30-50 transparent. Then when your visitors scroll down the page they will see the content behind the title.

I did something similar to this on this site http://tovah-miriam.com/ As you scroll down the page it slides under the title and nav bar which remain on top.

[prman]

Thanks very much for your reply. Yes setting it to sticky does the trick, but I'd like to avoid that for this particular project.
It works nicely for the http://tovah-miriam.com/ site but I'd prefer to keep the header area fixed if possible.
Any other ideas why the popup z-index seems to supersede the navigation z-index, even though the navigation is on a higher layer?

[Acorn]

Any other ideas why the popup z-index seems to supersede the navigation z-index, even though the navigation is on a higher layer?

Pop-ups are designed to be on top; it is what they do.

If you have a pop-up layer called, say, IrisGarden, try placing it between the MouseOff and MouseOver layers. This should help but might affect other rollovers that were relying on the MouseOver layer.

Acorn

[gwpriester]

I think the pop-up is on a higher level than the mouseoff and mouseover layers. And the nav bar needs to be on the mouse off layer to be seen when the page loads.

I'm sure one of the other members will have a suggestion or workaround.

One thing about your current site that I would change is the size of the type in the nav bar and on the page. It is fine for a mobile variant but on a desktop monitor is seems way to big.

[prman]

Hi, I wrote a reply earlier but not sure it went through, so am resubmitting. I apologize if this is a duplicate.

I tried moving the popups between the mouseoff and mouseover layers, as Acorn suggested, to no avail. However something Acorn said "Pop-ups are designed to be on top; it is what they do" made me realize I could create a trigger on the mouseoff layer and put the navigation menu on a popup layer - then it would always be on top. And lo and behold that worked! So thanks for your suggestions.

I am concerned, though, about what gwpriester said "I would change is the size of the type in the nav bar and on the page. It is fine for a mobile variant but on a desktop monitor is seems way to big." On all the devices I've looked on (1920, 1280 and mobile resolution) the size seems fine to me. The font is 24pt. Gwpriester, what resolution are you using? Are you zoomed in somehow? Acorn, does the size look too big to you as well? Thank you

[Acorn]

Acorn, does the size look too big to you as well?

I am afraid it does; the overall height of the menu and sub-menus is close to 50% of the page height (regardless of viewport scaling) so it is almost dominating the page.

20pt might be better.

Acorn

[prman]

OK point taken. I switched to 20pt. Thanks to all for your suggestions.