Docking layer menu issue

[Weynand]

Hi.

Pls have a look @ my website in in progress.... https://goalvision.nl I made a masterpage with a hamburger menu with an 'onclick' event to show the nav menu. The nav menu is a layer in docklayer mode.

When scrolling the page, certain objects (like the card object) move OVER the nav menu. Other objects (like text and images) move UNDER the menu. I want every object to move under the nav menu.

Pls test with a small viewport the main page and the webshop page (ECWID), click the menu, keep the menu open, scroll the page and you can see what happens.

I tried a lot of different settings, but was not able to find a solution.

Anyone?

Regards, Weynand

[crispy68]

Make sure your docking layer is 'moved to the front' which will give it the highest z-index. It should appear at the bottom in your Object manager.

[Weynand]

Make sure your docking layer is 'moved to the front' which will give it the highest z-index. It should appear at the bottom in your Object manager.

The docking layer is at the bottom on the master page. When I replace on the (index) page the card object with a text object (on exactly the same object position), the text will move behind the docking layer.

I just tested it in a different way: I copied the docking layer from the master page to the index page, changed ID etc. I made sure it was the last object on the page. However, the problem with the card object remains the same (card object is part of a layout grid). IS this a typical behavior of a card?

Any suggestions? Is an alternative available for the docking layer menu effect?

[Pablo]

To be able to help you, I need to see what you have done.
Do you have a demo project?

[Weynand]

To be able to help you, I need to see what you have done.
Do you have a demo project?

Here you are https://goalvision.nl/demo_project.zip

Thanks in advance

[Pablo]

A master page is always behind all other content (by design)
So, the quickest way to solve this is by adding to code to Page HTML->Between head tags:

Code: Select all

<style>
#nav_menu
{
   z-index: 9999 !important;
}
</style>

This makes sure the layer is always on top.

[Weynand]

A master page is always behind all other content (by design)
So, the quickest way to solve this is by adding to code to Page HTML->Between head tags:

Code: Select all

<style>
#nav_menu
{
   z-index: 9999 !important;
}
</style>

This makes sure the layer is always on top.

Thank you so much for the speedy reply!