sub menu is under page content - help

[longman]

Hello,

The sub-menus of the navigation menu (CSS Menu) goes under the content of the page, i wonder why and how to solve it?

screenshot of the problem https://cdn1.imggmi.com/uploads/2018/12 ... 2-full.png

Thanks!

[Pablo]

Did you make sure the z-order is above the other elements (arrange->move to front)?

[longman]

Hello Pablo,

The menu is within the Master page.

How do I make Master page's z-order above the elements within another page?

[Pablo]

The elements of a master page will always be at the background otherwise you cannot place other objects on top of it.
Note that normally a dropdown menu is part of a page header. In that case you can set the stack order to 'in front of content'.

[longman]

Where are "Stack order" and "In front of content" options?

I have upload an example https://ufile.io/uibsh in which sub menu goes under the content of the page.

[longman]

PS - in my previous web design software, we could add this code within the html of the panel/menu:

z-index:100;

It would make the menu to be always on top of other elements on the page, even if the menu was within the masterpage.

Possible to do it here?

[Pablo]

The menu is not on a page header.

- insert a page header
- set the stack level to 'in front of content'
- add the menu to the page header

my previous web design software, we could add this code within the html of the panel/menu:

You can add custom code via Page HTML or an HTML object.

[longman]

added the code in menu HTML and worked

Another question, since its related to the same sub-menu, i'll ask it here.

my sub menu width is 320, displays nicely in desktop.

However, I have a mobile version too, it goes to mobile at 768 breakpoint, and when in that breakpoint I rollover the mouse on the menu, the sub-menu is 320, it does not fit the screen (below 768).

Is it possible to make the sub-menu to fit the screen size automatically?

[Pablo]

No, I think it's better to use one of the responsive menus for that.

[44MLB]

Hi longman

I have a similar problem with icons, maps etc. going over the top of a responsive menu.

Any tips on were and how to enter the "z-index:100;" ? It would be nice if this fixed the problem.

[Pablo]

- insert a page header
- set the stack level to 'in front of content'
- add the menu to the page header

[44MLB]

I have the responsive menu in a layout grid on a master page.

[Pablo]

Normally a dropdown menu is part of a page header. In that case you can set the stack order to 'in front of content'.

With layout grids there is no z-order, all elements will be floating after each other. See the previously comments of this discussion.

[44MLB]

Unfortunately I can't get the design I want to work in a header.

[Pablo]

In that case you will have to add the z-index yourself.