www.wysiwygwebbuilder.com

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!

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

Hello Pablo,

The menu is within the Master page.

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

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'.

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.

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?

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.

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?

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

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.

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

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

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.

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

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