WB17 Layers may have issue

[sandy]

I have been working over the index page from older WB10 (maybe). Decided to make it 'Responsive' which is a lot more work to figure things out. Getting close but have this problem which I can't seem to get past. The menu from the header in a responsive FlexGrid will always be under the shape object that is also in the grid. Their is a text object that the menu covers up just fine when activated. I have tried moving things to 'Front' things to 'Back' at any place I can but can get the menu to pop OVER the shape object.

The Menu is a `ThemeableMenu' which resides in an Embedded page that holds the Logo (Image) and Menu which are also inside a FlexGrid. This FlexGrid has 2 rows, one for the Image, one for the menu.

Don't have an easy way to attach a pic here and have not published it yet so can't do a link. I have screen shots if needed.

Not sure how to get the menu to layer OVER the shape object.
Sandy

[crispy68]

In a floating layout, there is no z-index as things are stacked underneath each other. You may need to add some CSS code to give the menu a z-index to be above the shape object. Without seeing your project or online demo, I'm only guessing but you could try something like this:

Code: Select all

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

Change 'ThemeableMenu1' to the same ID your menu has.

[sandy]

Didn't seems to work when I tried with my object id.

It's odd that you can't change the z-index on the Shape Object, I looked a the source and didn't seem to make any difference top or bottom. I'll have to inspect some more and see what I can find. Messing with the Shape Object in the browsers inspector would allow me to mess with the z-index and make the pop up menus work but not so successful in trying to chance the CSS. I need to see what works in the inspector and apply it and see.

More messing with it. It feels like I have wasted a huge amount of time with this and trying to get the flex grid to behave with a stacked layout and images. Shadow and things get wonky, and nothing seemed to work just right. That's a different issues

So far the responsive experience has been not so worth it

Sandy

[Pablo]

If you use floating layout (either with layout grid of flexbox) then there is no z-index.
The z-index only makes sense if you overlap/layer objects on top of each other in absolute/fixed layout.

If you need further assistance then please share a DEMO project so we can see what you have done.

Note that there are many example templates to demonstrable how to use flexible layouts:
https://www.wysiwygwebbuilder.com/templates2022.html

[crispy68]

I'm sure my code will work but without seeing your page I was only sort of guessing.

[sandy]

Thanks Pablo and Crispy

Hacking the Layer didn't work for some reason. I tried adding the CSS to set the z-layer as well as messing with the browsers inspector to change the z-layer but in the inspector it came up with a warning that said something like can't will not affect it due to position type (Can't remember the exact).

I'm going to look again at the demo projects to see. What normally is really simple in WB has become complicated, which indicated that I'm likely not thinking right in the way it should be done.

Sandy

[crispy68]

If you can upload a demo page to your host and provide a link to the page, I'm sure we can provide the right steps to help but without it or a demo to look at what you've done we are only guessing.

[sandy]

OK finally got it up where I can send a link -

http://gtsparkplugs.com/wb17/index.html

Trying to do the following -
Retain the use of the Header and footer pages that are being used. This is using a flex box for everything with the header page inserted into the header of the flex box (top most section). This is to make sure I can modify these in a single spot.

Have some ability to support mobile devices, I'll settle with just menus working as a start (some issues with the menu exist as a bunch of links point to the index page and need to be set).

Later possible font size adjustment based on mobile. What I'm seeing is more and more phones have resolution above reasonable

Most of the site is the same pictures and text down the center. Getting rid of the old right side menus and related noise.

[crispy68]

Typically, when you want a menu to be part of a header and the menu to always be on top, it's best to use a page header or set a layout grid/flex container to be a header.

However, in your case to fix the issue, simply add the following CSS:

Code: Select all

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

[sandy]

Will give that a shot.

I think that I tried embedding the image and the menu into a page header but it had other display issues with the flex box below. Their was something else that was odd about it too, like you could not embed an embedded page into a page header. Have to give that a try again, as it might have been a sizing issue where the header would not accept the dropped embedded page.

Thanks for your help on this, let me give it a try!

Sandy

[sandy]

The fix works, but since it has to be applied to the page it is inserted on, not the embedded page I think it might mean that I would have to add that CSS to 150+ pages which would be a bad way to go. (Might be place to do it site wise so gets inserted in every page but not sure)

I'm going to spend some more time looking at the demo templates. Most look different layout wise then what I want to do, and many just don't work well IMO on a mobile device. I don't think any I have tried use the notion of an embedded page as the header which is a must have or it will be unmanageable in my case with so many pages.

Sandy

[crispy68]

Might be place to do it site wise so gets inserted in every page but not sure

You can. Click on page --> Site HTML --> between <head> tags and paste the code. It will now appear on every page.

You may want to look at using a master page versus embedded pages. I think it will be easier to do that way.

I'm going to spend some more time looking at the demo templates. Most look different layout wise then what I want to do, and many just don't work well IMO on a mobile device.

Most of the templates are not set up for mobile. The templates are simply to show off different design ideas. They are not complete templates thus wont look correct on mobile without your 'finishing' them.

[sandy]

Thanks,

Any good suggestions for a simple free or pay that works with WB17. My site is super simple but looking (www.gtsparkplugs.com) and really only need a few things remove to and done to make it mobile friendly. One is menus and the other I think WB17 has is a varying sized text box that will help with some of the tiny displays.

Thanks again for all your help on this, I have not published my site in a couple of (maybe WB12) version and most of the site comes up pretty good when I tried it so very happy about that.

Sandy

[crispy68]

Any good suggestions for a simple free or pay that works with WB17.

I'm not sure what you are asking for.

[sandy]

Sorry - Site templates with simple Mobile/Desktop support.

I took a look at a few on the pay template, but most looks slated towards e-commerce or might be too complex to deal with or just not my style preference. I'll take another look on the forms to see if I can find something, but with the fix you helped with should at least be able to continue with my old as I'll call it Web 1.0 site

Sandy

[alan_sh]

Have you zeen this?

viewtopic.php?f=41&t=93336