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

[HGF]

Hello,
In a "flex grid" I have an "embedded page".
The embedded page contains a menu structure only.
The idea is to reuse the menu structure multiple times and to make it easier to update all pages if the master menu is change.
In generell this works fine but the problem is, the drop down sub items are not coming to front.
I've taken a screenshot showing the issue. Unfortunately I don't know how to uopload.
Can somebody help?
Thank you,
HGF

[wwonderfull]

Upload it to any image sharing platform and give us a link or you can upload a demo project or give a link, then we can see the settings

[HGF]

@wwonderfull ,
thank you very much for the hint.
Please, could you check if this works.

https://ibb.co/54LcG4C

Thank you

[wwonderfull]

Are you using a master frame or a master page? You can reuse a menu of master page in every page you want.

See more about master frame or master page
https://www.wysiwygwebbuilder.com/master_frame.html

If you are trying to make the embedded page on the top, then I think it has to be in a layout grid or a flex container and set to header, that would make it stay top on there or you can use sticky too.
A project file would give a better understanding I think. Just a demo project file.
sorry to ask again but need more specific details on what you are trying to achieve.

[HGF]

https://ibb.co/SwfnX0G
https://ibb.co/02wrNQp
https://ibb.co/48JP95g

Hmm, I tried to upload the 1.wbs file to https://imgbb.com/. It's not accepting the extension, not even when I just renamed wbs to jpg.
Any idea how to upload *wbs files?

Maybe I should test with "Master Frames" instead of "Embedded Pages".

[wwonderfull]

Master frame works inline just like an embedded page I am sure that you will find your solution using it. I used it on a site project too.

[HGF]

After some more investigations:
The headline is created by the Flexible Text extension. It seems, Flexible Text is always crawling the top layer.
When replacing the Flexible Text with static text it works.
It seems, unfortunately Flexible Text and Embedded Page doesn't work together.

By the way, the issue is with Master Frame as well.

[wwonderfull]

IDK why would you need an embedded page as menu although master page does that exact thing. But still curious what are you actually trying to do here.
The software has many settings which can combined and conflict at the same time so using it cautiously and with proper knowledge is the key. If you You can share a domain link or share or upload a demo project file you can upload it in google drive or 3rd party https://filebin.net/
We can then see what is the issue and also what exactly is the trick your trying to do.

[HGF]

Excellent, thank you very much. Now I can provide the wbs file.
https://filebin.net/ob01tzm2vm58dfsk
I guess it is not tricky.
I have 2 pages:
1. content pagewith Flex Grid (pic3.jpg)
2. page with Responsive Menu (pic2.jpg)

In page 1 I have multiple raws.
In raw #1 I added "Embedded Page" linking to page 2 containing the Responsive Menu (pic1.jpg)
In raw #2 I have a static text
In raw #3 there is a flexible text. (pic4.jpg)

pic5.jpg shows the result on the server.
In the green square the sub menu is over the static text - what is correct
In the yellow yellow square the the sub menu is behind the flex text - what is causing problems because in all my pages I'm using "Flexible Text".

With Master Pages it is the same behaviour.
I guess, the flex text always is on the top layer.
Maybe you can reproduce with the attached wbs.

Thank you very much for your support!
HGF

[wwonderfull]

pic5
Are you trying to say that the DYNAMIC MENU TEXT FLEX TEST line is overlapping the menu i.e text is behind coming over the menu? If that is the case then It is a Z- Index issue.
not in pc so could not yet check the demo. But saw the images and got the issue I think.
For example if you your themeable menu ID is "ThemeableMenu1" then the code would be

Code: Select all

<style>
#ThemeableMenu1
{
  z-index: 9999;
}
<style>

[HGF]

Yes, it seems to be a z-index issue.
I simplyfied the scenario and made the background of the sub layers in green
https://filebin.net/qukksgv63jyjnryd


This is the html code of the master menu. Where and how to add the z attribute you mentioned?


<label class="toggle" for="menu_master_1-submenu" id="menu_master_1-title"><span id="menu_master_1-icon"><span>&nbsp;</span><span>&nbsp;</span><span>&nbsp;</span></span></label>
<input type="checkbox" id="menu_master_1-submenu">
<ul class="menu_master_1" id="menu_master_1" role="menu">
<li role="menuitem"><a href="" title="L0.1----------" onclick="document.getElementById('logoutform').submit();return false;">L0.1----------</a></li>
<li role="menuitem"><a href="" title="L0.2----------">L0.2----------</a></li>
<li role="menuitem">
<label for="menu_master_1-submenu-0" class="toggle">L0.3----------<b class="arrow-down"></b></label>
<a href="javascript:void(0)" title="L0.3----------">L0.3----------<b class="arrow-down"></b></a>
<input type="checkbox" id="menu_master_1-submenu-0">
<ul role="menu">
<li role="menuitem"><a href="" title="L3.1----------">L3.1----------</a></li>
<li role="menuitem"><a href="" title="L3.2----------">L3.2----------</a></li>
<li role="menuitem"><a href="" title="L3.3----------">L3.3----------</a></li>
<li role="menuitem"><a href="" title="L3.4----------">L3.4----------</a></li>
<li role="menuitem"><a href="" title="L3.5----------">L3.5----------</a></li>
</ul>
</li>
</ul>


This is the code of the embedded menu. There we have a z-index attribute with value 13. I'll try to change it to 9999.

<div id="wb_menu_master_1" style="position:absolute;left:0px;top:0px;width:861px;height:45px;z-index:13;">
<label class="toggle" for="menu_master_1-submenu" id="menu_master_1-title"><span id="menu_master_1-icon"><span>&nbsp;</span><span>&nbsp;</span><span>&nbsp;</span></span></label>
<input type="checkbox" id="menu_master_1-submenu">
<ul class="menu_master_1" id="menu_master_1" role="menu">
<li role="menuitem"><a href="" title="L0.1----------" onclick="document.getElementById('logoutform').submit();return false;">L0.1----------</a></li>
<li role="menuitem"><a href="" title="L0.2----------">L0.2----------</a></li>
<li role="menuitem">
<label for="menu_master_1-submenu-0" class="toggle">L0.3----------<b class="arrow-down"></b></label>
<a href="javascript:void(0)" title="L0.3----------">L0.3----------<b class="arrow-down"></b></a>
<input type="checkbox" id="menu_master_1-submenu-0">
<ul role="menu">
<li role="menuitem"><a href="" title="L3.1----------">L3.1----------</a></li>
<li role="menuitem"><a href="" title="L3.2----------">L3.2----------</a></li>
<li role="menuitem"><a href="" title="L3.3----------">L3.3----------</a></li>
<li role="menuitem"><a href="" title="L3.4----------">L3.4----------</a></li>
<li role="menuitem"><a href="" title="L3.5----------">L3.5----------</a></li>
</ul>
</li>
</ul>
</div>

[wwonderfull]

Having problems opening your project as your using extensions which I am not using.
Live website link would have been much quicker and better. In that way could have given a precise solution for sure. Meaning publish your website on the webhost server and give the domain link if possible.

[HGF]

Sure, this test page should be available. Please check.

https://mcwarrior.de/Dynamic-Menu-Test.php

[wwonderfull]

Fixed it using z-index
here is how it looks


You can add this part code via the HTML object and Page HTML.
https://www.wysiwygwebbuilder.com/add_html.html

using html tool choose option
Type: do not use div
and paste this code

Code: Select all

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

[HGF]

This is exactly what I want to achieve.
I injected the code you provided by using the HTML tool. And I tried serveral positions. (pic7)
https://filebin.net/umio8ppepj7qv9qi
Unfortunately the result always is different as in your screenshot.

In your code, doesn't it mean to bring the FlexGrid2 to the top? Shouldn't we try to bring Mastermenu_1 to the top? I tried to change FlexGrid2 to Mastermenu_1 but id didn't work either. Maybe I have a wrong understanding how this works.

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


This is strange
https://filebin.net/koxhvfriu06onw17

z-index for the menu sub layers is "9999"
z-index for wb_Extension1 is "4"
In my understanding the sub layer should overlap the extension. But is doesn't ??

[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