Z Index Elementor

Posted on  by



Z Index Elementor

Positioned elements (and their children) with a z-index value of auto (ordered by appearance in the HTML) Positioned elements (and their children) with positive z-index values (higher values are stacked in front of lower values; elements with the same value are stacked according to appearance in the HTML). Elementor dropdown menu and title z-index. Resolved Alexander (@donatory) 2 years, 10 months ago. There is something wrong with Elementor menu dropdowns.

No extra plug-ins required! Elementor Pro Required.

In this article, I will explain how to create a header that is not visible when scrolling down, but that can be shown at any location in the page by clicking on the hamburger icon.

Bring Element To Front Css

It can be in the header template, or in a single page.

Then, give that section a CSS ID of ' menuhopin ' and a Z-Index of 199

Now, create a new section, give that section a z-index of 999 and set the columns gap to no gap

This is the section that will house the hamburger menu. Don't worry about positioning, the CSS will place it right.

Using Z Index Elementor

Choose your preferred one, and place all of its html in an html element in the section created above

See this article for the examples to choose your preferred icon.

Finally, simply add all of this code in another html element, created below the one that has the hamburger icon

<script>

document.addEventListener('DOMContentLoaded', function() {
jQuery(function($){
$(document).scroll(function() {
var y = $(this).scrollTop();
if (y > 46) { //change this value here to make the menu up at your desired scroll location.
$('.hamburger').addClass('burgerin');
$('#menuhopin').addClass('hopingo');
if ($('.hamburger').hasClass('clickedon')) {
$('.hamburger').click();
}
}
else {
$('.hamburger').removeClass('burgerin');
$('#menuhopin').removeClass('hopingo');
}
});
$('.hamburger').click(function(){
$('#menuhopin').toggleClass('hopingo');
$(this).toggleClass('clickedon');
});
});
});
</script>

Z Index Elementor

Z-index elementor


<style>
#menuhopin{
-webkit-transition: transform 0.34s ease;
transition : transform 0.34s ease;
}

.hopingo{
transform: translateY(-110px); /*adjust this value to the height of your header*/
}

.hamburger{
transform: translateY(-110px); position: fixed;
top: 18px;
right: 18px;
-webkit-transition: transform 0.34s ease;
transition : transform 0.34s ease;
}

.burgerin{
transform: translateY(0px);
}
@media (max-width: 499px){
.hopingo{
transform: translateY(-410px); /*adjust this value to the height of your header*/
}
nav.elementor-nav-menu--dropdown.elementor-nav-menu__container {
top: 4px!important;
}
}

</style>

This will also work for sections that are not at the top of the page. Simply adjust the (y > 46) value in the code to the right height.

Z Index Popup Elementor

Using z index elementor

Z-index Elementor

Et voila! Thanks for reading!
Let me know if you need help!