How to bring an "embedded Page" to the top layer

[wwonderfull]

This is exactly what I want to achieve.
<style>
#FlexGrid2 .nav {
{
z-index: 9999;
}
<style>

the style tag ends with /style

so the code would be

Code: Select all

<style>
#FlexGrid2 .nav
{
z-index: 9999;
}
</style>

Now it is bound to work for sure.

[HGF]

Unfortunately, I'm not successful, not even with the slash in front of style.
Maybe you can share the html code from where you have generated the screenshot you provided.
This would show me the position where to add the code.

[wwonderfull]

Unfortunately, I'm not successful, not even with the slash in front of style.
Maybe you can share the html code from where you have generated the screenshot you provided.
This would show me the position where to add the code.

Did you use the latest code I gave?
It has too work or I my self am confused what would go wrong.
I am checking your live website and see what changes has been made using the latest code

[crispy68]

In your demo page, I do not see the z-index:9999 in the code. Can you please update the demo online with your changes? When Wwonderfulls code is added it works.

[wwonderfull]

In your demo page, I do not see the z-index:9999 in the code. Can you please update the demo online with your changes? When Wwonderfulls code is added it works.

Here is the live site link @crispy https://mcwarrior.de/Dynamic-Menu-Test.php
I think even without the z-index it is fine when I view it on the browser how about you.

[HGF]

ooops, my apologies.
I did not upload the code
Yes, I can confirm, it is working now as expected.
Thank you very much to everybody.
HGF

[wwonderfull]

ooops, my apologies.
I did not upload the code
Yes, I can confirm, it is working now as expected.
Thank you very much to everybody.
HGF

No problem Btw please change that background red color, it looks dangerous for the eyes. You can use a lighter red if you have too. Just a suggestion...

[HGF]

Thanks for your feedback against the color. Red is the defined team color, good idea to make it lighter. Thank you all, you did a good job.

[crispy68]

@wwonderfull, yes it is working now for me too

As for the color red and from a design view, I would suggest not doing a red background even if you make it lighter as it is harsh on the eyes. If your team colors are red then I would look to highlight other things on the page in red (ex: icons, Titles/Headings, logo, etc.)

[HGF]

@wwonderful, @crispy68
Thank you very much for the design hints.
I've redesigned the pages and now it is definetly more user friendly.

https://mcwarrior.de/v2/pages_content/n ... einhau.php

In the page above I'm using Photo Gallery - Light Box Gallery - magnificpopup
In generell it is working okay.

My question: Is there a setting or maybe different extension for better mobile usage?
In PhotoGallery, if clicking on a thumbnail:
1. On mobil I would like to disable left/right arrows and to enable swiping.
2. On mobil I would like to get the image size as large as possible (best fitting to the mobile screen)

I searched the forum, maybe I searched for the wrong terms.
Can you help me

[HGF]

Hi all,
I downloaded "Mobile Touch Gallery". It seems, this is doing what I'm searching for.
HGF

[wwonderfull]

Hi all,
I downloaded "Mobile Touch Gallery". It seems, this is doing what I'm searching for.
HGF

Use 100vh for the grids and set the background images to "do not repeat" and background size to "Cover" And instead of flex grid try to use layout grids. Menu text should be bold and font size 12 atleast and also there is text at the bottom as I can see that too.

just a tip

[HGF]

@wwonderfull, thank you very much for your hints. I much appreaciate your support!!

https://mcwarrior.de/v2/pages_content/n ... einhau.php

This is how it looks with the suggested changes. Much better in my opinion. I guess I need to rezise the background image.

Now I'll start to learn more about layout grids.

Regards HGF

[HGF]

@wwonderfull
This my first attempt with layout grid. It seems, in layout grid there are much more options available than in flex grid.
And mobiletouchgallery is working fine as well.

I'm just unsatisfied with the background image. I'll play more around with it.

https://mcwarrior.de/v2/pages_content/n ... au-exp.php

Regards HGF

[wwonderfull]

@wwonderfull
This my first attempt with layout grid. It seems, in layout grid there are much more options available than in flex grid.
And mobiletouchgallery is working fine as well.

I'm just unsatisfied with the background image. I'll play more around with it.

https://mcwarrior.de/v2/pages_content/n ... au-exp.php

Regards HGF

The background image set it to "do not repeat" and background image size to "cover" for the start page, uber uns, anmelden and all the other pages using grid with background image. You can increase the top menu text size to 16 and make it bold along with login text button etc.

[HGF]

Jepp, thank you,

I've started with this page
https://mcwarrior.de/v2/pages_content/n ... au-exp.php
and will continue with the others.

Regards
HGF

[HGF]

@wwonderfull
I've started to redesign all pages with LayoutGrid and the settings you suggested.

Maybe you can help me again
Whe using the Flexgrid the following script brought the menu structur always on top

<style>
#FlexGrid2 .nav
{
z-index: 9999;
}
</style>

When working with Layoutgrid, I changed "#FlexGrid2 .nav" to "#LayoutGrid2 .nav" as an example. But, now there are multiple Layout grids. It would be great, if you could provide me a sample how to modify the script to make it working.
Thank you in advance
HGF

[wwonderfull]

Can you show or submit a demo of the problem which was created. By seeing the project I can tell you what would be the new code for your grid. So share the domain demo link.

[HGF]

https://mcwarrior.de/
goto anmelden
Benutzername: wwonderfull
Passwort: wwonderfull

You will reach page: https://mcwarrior.de/v2/pages_content/n_start_int.php

Click in menu item "Galerien"
The sub menu opens. but it is not on the top layer and it is impossible to select an sub item.
This happens, because in this page the menu is implemented via "embedded page".
With flexgrid you solved the problem by adding the html script:
<style>
#FlexGrid2 .nav
{
z-index: 9999;
}
</style>

Since we are working with LayoutGrids, I guess the script needs to be modified. I change #FlexGrid2 .nav with the current Object ID, but we have more than 1 LayoutGrids and I don't know, how the modified script should look like.

If I do NOT use" embedded page" but implement the menu directly in the LayoutGrid, it works fine. In order I have a lot of pages it would be more convenient to use a signle source (embedded page).

Note: Not all pages are already redesigned. I'm continue to work on it.
Thank you

[wwonderfull]

Got it.

Code: Select all

<style>
#wb_LayoutGrid1
{
z-index: 1000;
}
</style>

[HGF]

It works!
Thank you very much
Regards
HGF