Padding fulcreen image

I Need Help
1

Hello, I created vertical navbar with this tut. How to Make a Vertical Menu Website in Blocs 4 - YouTube
Problem I’m having right now is that when I open image in gallery - fullscreen - I still can see navbar there.
Any idea how to get rid of it?
I’m using also this fit to screen code in page settings:

 <style> 
	.mx-auto 
	{ max-width: 100%; height:none; max-height: 90vh;} 
	.fullscreen-lb{ background:rgba(0,0,0,0);
	border-width:0px 0px 0px 0px; }
	.fullscreen-modal{ background:rgba(0,0,0,.8); } 
</style>

Thank you!

Screenshot 2023-03-14 at 09.37.16
Screenshot 2023-03-14 at 09.37.161584×1526 358 KB

2

Hi @cinges,

It’s the z-index, it’s set too high. Best practise is not to use some random high number, there is actually a structure to z-index in Bootstrap.

Also I wouldn’t add styling to .mx-auto, it’s a Bootstrap utility class. Best to add a custom class.

You will need to look in the browser inspector and see what z-index is being used on the gallery, If it’s using a modal it will be something like 1060. So the menu bar will need to be below that.

Here is an example of how z-index works

3 Likes
3

You never cease to capture my attention with what you know.

4

I’ll beat him :woman_student::
The concept of z-index can be as slippery as a bar of soap in a hot shower :soap: :shower:. It’s all relative. You might have a humble value of 1 that reigns supreme over a towering 6000. Crazy, huh?

The reason for this is that z-index determines the stacking order of elements on a webpage. The higher the value, the closer the element is to the front of the screen. But it’s not just about the number, it’s also about the context in which it’s used.

This means that you could have a div with a z-index of 999, but if it’s nested inside another div with a z-index of 2, it will be buried beneath its parent like a timid mole hiding from the sun under my :palm_tree: :coconut:.

So, the next time you find yourself scratching your head over z-index, just remember that it’s all relative, and a lowly 1 can reign supreme over a mighty 6000.

1 Like
5

Not sure it’s beat me, when I told you about this…. Skooled :joy::joy::joy:

6

:soap: and :shower: where not included :grin: :grin:

7

Still a lot I don’t know, but learn everyday. Usually learn about the things I was doing wrong :joy:

Don’t confuse learning an app with learning the web. Learn the web, the app is easy.