Z-index content page

[Excede]

We are having difficulty getting z-index to work ion this page (which is a content page inside a layout).
https://development.scatbags.com/shop

The image should be at the back but we can’t seem to get it to go behind the menu (the menu is part of our layout page and should always be on top of the content. The buttons on the content page should also be behind.

We did not use a modal because it is not suitable for our needs.

[Teodor]

Put the following styling for your <header>:

    z-index: 999;
    position: relative;

[Excede]

In the header of the content page? I tried and it dint have any effect, is that the correct place to put it?

[Teodor]

@Excede these are css rules, they need to go in your CSS for styling the header element on your page. Or add it using the design panel to the existing class applied to the header element.

[Excede]

sorry the layout page or the content page?

[Teodor]

I don’t understand what do you mean. There is one <header> element on your page. You have styled it already using the Design panel, from what i see - there is a class named .style37 applied to it. It doesn’t matter where the element is located, it all goes to your custom css file.

[Excede]

there are content pages and layout pages, in this case I have a content page using a layout. There are header in both pages.
Ok I’ll find where 137 is.

[Teodor]

It’s the header holding your menu:

	<header class="style137">

		<div class="d-flex justify-content-between align-items-center">
			<section>
				<div id="menu_hype_container" class="HYPE_document menu style117" style="width: 45px; height: 40px; overflow: hidden;" dmx-on:click="openmenu.setValue(openmenu.value == 1	? 0 : 1)">


					<script type="text/javascript" charset="utf-8" src="menu.hyperesources/menu_hype_generated_script.js?61359"></script>
				</div>


			</section>
			<img src="assets/scatbagslogo.svg" class="style135">
			<img src="assets/bag_empty.svg" class="style136">
		</div>

		<div is="dmx-animate" id="animate1" showEffect="slideInLeft" hideEffect="slideOutLeft" dmx-bind:visible="openmenu.value == 1" dmx-bind:showduration="800">

			<div class="d-flex justify-content-start style138 flex-column">
				<button id="btn1" class="btn scatfontmenu">HOME</button>
				<button id="btn2" class="btn scatfontmenu">SHOP</button>
				<button id="btn3" class="btn scatfontmenu">SCATULATOR</button>
				<button id="btn4" class="btn scatfontmenu">FAQ</button>
				<button id="btn5" class="btn scatfontmenu">ABOUT</button>
				<button id="btn6" class="btn scatfontmenu">CONTACT</button>
				<button id="btn7" class="btn scatfontmenu">MY ACCOUNT</button>
			</div>


		</div>
	</header>

It would make it a lot easier to add meaningful classes to your elements when styling them, so that it’s easier to understand which element are you referring to. Example - instead of leaving it empty - enter a class name like header-top as explained here:

Using the Design Panel

[Excede]

Ok, I found it, close but doesn’t quite do what I want and now the menu id offset from the top rather than just below the hamburger, I guess I’ll work it out. Thanks for your help.

[Teodor]

Not sure what’s the problem with the menu, but looks fine here:

[Excede]

See the yellow bag (it should be behind the overlay and the menu is offset compared to yours for some reason. It actually seems to be jumping around a bit as sometimes it is the same as yours. Very strange.

[Teodor]

Well the bag is yellow because the header is covering the overlay you show, and the logo is in the header, so it is above the overlay as well… it’s just the way you’ve setup your layout.