Z-index problem with Panel Layer

[Bluesman]

Hi Pablo and team. Using the Panel layer for menu at the left border with the trigger button at the right top in the header having problem that the panel goes under the footer when scrolled down.
Have set the z-index to: 12000 for the panel layer. The z-index for the footer layout grid seams to be 10000

Using this code for the z-index on the master page were both panel layer and footer are located:

<style>
#PanelLayer
{
z-index: 12000 !important;
}
</style>

(At Page html between headers)

Page: https://www.tellusskomakeri.se/test/

[Pablo]

Are you sure you haven't set the z-index of the footer to '10000' yourself?
If you need help with this, then please share a demo project so I can see all your settings.

[wwonderfull]

Hi Pablo and team. Using the Panel layer for menu at the left border with the trigger button at the right top in the header having problem that the panel goes under the footer when scrolled down.
Have set the z-index to: 12000 for the panel layer. The z-index for the footer layout grid seams to be 10000

Using this code for the z-index on the master page were both panel layer and footer are located:

<style>
#PanelLayer
{
z-index: 12000 !important;
}
</style>

(At Page html between headers)

Page: https://www.tellusskomakeri.se/test/

Code: Select all

#PanelLayer_panel {
    z-index: 10000;
}

[Bluesman]

Hi Pablo and team. Using the Panel layer for menu at the left border with the trigger button at the right top in the header having problem that the panel goes under the footer when scrolled down.
Have set the z-index to: 12000 for the panel layer. The z-index for the footer layout grid seams to be 10000

Using this code for the z-index on the master page were both panel layer and footer are located:

<style>
#PanelLayer
{
z-index: 12000 !important;
}
</style>

(At Page html between headers)

Page: https://www.tellusskomakeri.se/test/

Code: Select all

#PanelLayer_panel {
    z-index: 10000;
}

Hi wonderful, tnx for jumping in. I don't get it... do you mean I have written the code wrong? The objects name is: PanelLayer not PanelLayer_panel ??

[Bluesman]

Are you sure you haven't set the z-index of the footer to '10000' yourself?
If you need help with this, then please share a demo project so I can see all your settings.

Hi Pablo, tnx for checking. I have not set the z-index for the footer, but when checking the HTML I can see it sais 10000.
For now I wonder if the code I use is correct? Or can I set the z-index in another way?

[crispy68]

@bluesman,

Wonderful's code is correct. You are targeting the wrong part of the panel layer.

[Bluesman]

Aha... tnx crispy and wwonderful, chall check at once.

[VictorKrs]

Hello Bluesman!

Please tell me, how did you do the smooth switching between pages on the site? Or is it taking so long for my page to load?

[Bluesman]

Hello Bluesman!

Please tell me, how did you do the smooth switching between pages on the site? Or is it taking so long for my page to load?

Hi Victor. I'm using the free extension "Page Transitions" https://www.wysiwygwebbuilder.com/pagetransitions.html
I am using the settings:
Fade In duration 600
Fade out duration 600

[VictorKrs]

Hello Bluesman!

Please tell me, how did you do the smooth switching between pages on the site? Or is it taking so long for my page to load?

Hi Victor. I'm using the free extension "Page Transitions" https://www.wysiwygwebbuilder.com/pagetransitions.html
I am using the settings:
Fade In duration 600
Fade out duration 600

Thanks,Bluesman!
This extension works fine for you. I will figure out why this extension does not work properly for me...

[Bluesman]

@bluesman,

Wonderful's code is correct. You are targeting the wrong part of the panel layer.

Hi and tnx again crispy. I'm wrecking my head around this. Clearly the target is as you tell me and I check in the HTML. But the object is named as I wrote?? The first time I experience this that the software renames the object into the HTML file?? Do you know why?

[Bluesman]

Hello Bluesman!

Please tell me, how did you do the smooth switching between pages on the site? Or is it taking so long for my page to load?

Hi Victor. I'm using the free extension "Page Transitions" https://www.wysiwygwebbuilder.com/pagetransitions.html
I am using the settings:
Fade In duration 600
Fade out duration 600

Thanks,Bluesman!
This extension works fine for you. I will figure out why this extension does not work properly for me...

Do you have a link to the page you are using it on? Do you have it on a master page or on each single page? In this project I have it on each page.

[crispy68]

@bluesman,

The ID of the panel layer is PanelLayer but there is a <div> outside of this ID called PanelLayer_Panel. WB generates this code. This container is what was falling behind your footer. Since ID PanelLayer is inside PanelLayer_Panel, you need to target the outer <div> and not the inner <div>. Looks like this in the html code:

Code: Select all

<div id="PanelLayer_panel">
  <div id="PanelLayer">
  </div>
</div>

Setting the z-index of the inner <div> only affects it inside the PanelLayer_panel <div> and not the rest of the page.

[Bluesman]

@bluesman,

The ID of the panel layer is PanelLayer but there is a <div> outside of this ID called PanelLayer_Panel. WB generates this code. This container is what was falling behind your footer. Since ID PanelLayer is inside PanelLayer_Panel, you need to target the outer <div> and not the inner <div>. Looks like this in the html code:

Code: Select all

<div id="PanelLayer_panel">
  <div id="PanelLayer">
  </div>
</div>

Setting the z-index of the inner <div> only affects it inside the PanelLayer_panel <div> and not the rest of the page.

So for getting the outer id, must I check the generated code? Or can I find it in another way?

[crispy68]

You will need to check the generated code BUT for any future panel layers it will be similar to this. It's simply the ID followed by _panel.

So you if you gave the panel layer an ID of Bluesman, then it would just be: Bluesman_panel. Make sense?

[Bluesman]

You will need to check the generated code BUT for any future panel layers it will be similar to this. It's simply the ID followed by _panel.

So you if you gave the panel layer an ID of Bluesman, then it would just be: Bluesman_panel. Make sense?

When you know it, it make sense but does this come with other objects as well?
Tnx crispy

[crispy68]

There are several other objects that WB will add a 'wb_' prefix to. So yes, there are times you may have to use #wb_objectID versus just #objectID. As for some of the other menus, they may be a bit different as those are sometimes more complicated.

[Bluesman]

There are several other objects that WB will add a 'wb_' prefix to. So yes, there are times you may have to use #wb_objectID versus just #objectID. As for some of the other menus, they may be a bit different as those are sometimes more complicated.

Tnx crispy... then we will see what comes around

[wwonderfull]

Hi wonderful, tnx for jumping in. I don't get it... do you mean I have written the code wrong? The objects name is: PanelLayer not PanelLayer_panel ??

As @crispy68 has mentioned everything fluently and added to that is that the PanelLayer_panel is generated using jQuery so it is more like a dynamic element as we interact with it using the menu. Inside of wwb what we configure is actually the div inside which all the menu contains which is the PanelLayer but that itself contains inside that long side panel which gets the panel extension added because of the jQuery code var f = d.id + "_panel"; and because of that the PanelLayer becomes PanelLayer_panel for creating that long side panel.

[Bluesman]

Hi wonderful, tnx for jumping in. I don't get it... do you mean I have written the code wrong? The objects name is: PanelLayer not PanelLayer_panel ??

As @crispy68 has mentioned everything fluently and added to that is that the PanelLayer_panel is generated using jQuery so it is more like a dynamic element as we interact with it using the menu. Inside of wwb what we configure is actually the div inside which all the menu contains which is the PanelLayer but that itself contains inside that long side panel which gets the panel extension added because of the jQuery code var f = d.id + "_panel"; and because of that the PanelLayer becomes PanelLayer_panel for creating that long side panel.

Tnx for that explanation wwonderful