Themeable Menu behaves differently for pages with cards

[code2]

Hi

I have always seemed to have a problem with menus. The whole Header Page in a master-page situation always work against when I used embedded Page. Illegal use of Header Page. I usually work it out. But now with the Responsive Web Design and Layout Grid, it seems the some times it works with Cards and sometime not. The only solution seems to be unchecking the z-order option on each page. It says to only do it if you know what you are doing (and I do not).

The problem is drop down menus (Themeable or Responsive) seem to sometimes go beneath other object on a pages and other times not. On other occasions 2 or 3 sub menu items are not selectable but the ones further down are. However, the Video page in the About Us menu drop-down uses Cards also but the drop down works as it should.

I have literally thrown together several website pages to show what I mean. It might take a while but it you open up various pages and then drop the menu down, you see some go under object. The menu items that are just numbers and one called "Name of my Company Home" are not actual pages. I just put them there as fillers for length.

https://targe.com.au/beta/test.html

Please don't tell me I'm crazy. It has been driving me nuts. Layout Grids and Cards are absolutely great, but I do have trouble with them.

I just can't not figure out what I am doing wrong.

Sorry for the explanation. I know it is all over the place. But I though the only way to explain it was to show the range of things that work and don't work across several scenarios.

Please be understanding.

[BaconFries]

If you need help then it is always best to provide a "Demo" project. This is so that the settings you have used can be viewed as viewing the source code of the page doesn't help.
viewtopic.php?f=10&t=82134

[code2]

Thanks

here is the project file for the ealier example. As mentioned, all the exampels are from three websites. I have taken as much out as I can so that you can see all the different scenarios. It is actaully worse on mobile small devices when using fixed header or sticky options.

None of the pages in this project are using Header (fixed) or Sticky option in Layout Grid because I just couldn't get them to work on small mobile devices. As also, mentioned in some cases even when the submenu is in front of and overlaying a Card (eg the words in an image or in a solid background grid, some of the menu items in line with the word are not accessable.

https://targe.com.au/beta/Test_Responsi ... roblem.wbs

[Pablo]

Where is your project do I need to look to see the problem?

Please read:
viewtopic.php?f=10&t=82134

Note: in floating layout there is no z-index. So, the next object on the page always overlap the previous one.
If you want certain object to overlap previous one then you will need to add the z-index yourself. This must be done in the container that holds the menu.

[code2]

Thanks.

As I now understand it, when using Layout Grids, Card Containers and other RWD elements, it is ok to uncheck the z-order in every page.

I was concerned that turning z-order across the site may have affected something. Is there an easy way to uncheck that function across a whole site? I looked in multi page properties and the site properties but could not see an option. I also could find one in Settings Options.

Anyway, I will turn that function off in all my websites.

In answer to your question, Videos page in the About Us submenu is the only one that works and orders over the video Cards in a layout grid. All the other active pages have z-order overlay problems with some affecting which menu item would work. The Contact Us page is one where the long drop down menu will not allow item 2,3 and 4 to be selected but the first link and the others are ok.

So it looks like unchecking z-order is the way to fix it all.

Thank you.

[crispy68]

So it looks like unchecking z-order is the way to fix it all.

No, I would not suggest doing this.

I haven't had a chance to look at your project but I guarantee there is another solution to fix your issue.

[Pablo]

To make sure the menu is always on top, add this code to the 'custom style' section of the layout grid:

Code: Select all

z-index: 9999

[code2]

Thanks Pablo and Crispy68,

I have re-instated the z-index option on all the pages.

Pablo, I did as you suggested with the z-index: 9999 setting. All is working as it should now. I could find a "CODE: SELECT ALL" option. So, I placed it in the General Styles > CustomStyle > Custom Style input field (see image).



It worked. So, I guess I did it correctly.

I have a couple of other issues. But, will post them in a seperate Topic and in suggestions.

Thanks for your help on this one.