WB17 Layers may have issue

All WYSIWYG Web Builder support issues that are not covered in the forums below.
Forum rules
IMPORTANT NOTE!!

DO YOU HAVE A QUESTION OR PROBLEM AND WANT QUICK HELP?
THEN PLEASE SHARE A "DEMO" PROJECT.



PLEASE READ THE FORUM RULES BEFORE YOU POST:
http://www.wysiwygwebbuilder.com/forum/viewtopic.php?f=12&t=1901

MUST READ:
http://www.wysiwygwebbuilder.com/getting_started.html
WYSIWYG Web Builder FAQ
Post Reply
sandy
 
 
Posts: 17
Joined: Wed Nov 02, 2011 7:33 am
Location: Los Angeles, CA
Contact:

WB17 Layers may have issue

Post by 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
User avatar
crispy68
 
 
Posts: 2737
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: WB17 Layers may have issue

Post by 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
 
 
Posts: 17
Joined: Wed Nov 02, 2011 7:33 am
Location: Los Angeles, CA
Contact:

Re: WB17 Layers may have issue

Post by 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
User avatar
Pablo
 
Posts: 21569
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: WB17 Layers may have issue

Post by 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
User avatar
crispy68
 
 
Posts: 2737
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: WB17 Layers may have issue

Post by crispy68 »

I'm sure my code will work but without seeing your page I was only sort of guessing.
sandy
 
 
Posts: 17
Joined: Wed Nov 02, 2011 7:33 am
Location: Los Angeles, CA
Contact:

Re: WB17 Layers may have issue

Post by 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
User avatar
crispy68
 
 
Posts: 2737
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: WB17 Layers may have issue

Post by 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
 
 
Posts: 17
Joined: Wed Nov 02, 2011 7:33 am
Location: Los Angeles, CA
Contact:

Re: WB17 Layers may have issue

Post by 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.
User avatar
crispy68
 
 
Posts: 2737
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: WB17 Layers may have issue

Post by 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
 
 
Posts: 17
Joined: Wed Nov 02, 2011 7:33 am
Location: Los Angeles, CA
Contact:

Re: WB17 Layers may have issue

Post by 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
 
 
Posts: 17
Joined: Wed Nov 02, 2011 7:33 am
Location: Los Angeles, CA
Contact:

Re: WB17 Layers may have issue

Post by 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
User avatar
crispy68
 
 
Posts: 2737
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: WB17 Layers may have issue

Post by 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
 
 
Posts: 17
Joined: Wed Nov 02, 2011 7:33 am
Location: Los Angeles, CA
Contact:

Re: WB17 Layers may have issue

Post by 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
User avatar
crispy68
 
 
Posts: 2737
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: WB17 Layers may have issue

Post by crispy68 »

Any good suggestions for a simple free or pay that works with WB17.
I'm not sure what you are asking for. :?
sandy
 
 
Posts: 17
Joined: Wed Nov 02, 2011 7:33 am
Location: Los Angeles, CA
Contact:

Re: WB17 Layers may have issue

Post by 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
 
 
Posts: 1680
Joined: Tue Jan 01, 2019 5:50 pm

Re: WB17 Layers may have issue

Post by alan_sh »

Have you zeen this?

viewtopic.php?f=41&t=93336
Post Reply