Create a header that shows anywhere on the page on hamburger icon click !

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.

To begin with, create your menu in a new section

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

Display header anywhere on the page on icon click

Make that section sticky at the top

Elementor Sticky Header Changes Logo Size and Position

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.

Display header anywhere on the page on icon click
Display header anywhere on the page on icon click

Download the hamburger menu icons here

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

Elementor Close PopUp on Click for Menu & Same Page Links
the one on the left

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>

jQuery(document).ready(function( $ ) {
$(document).scroll(function() {
var y = $(this).scrollTop();
if (y > 46) { //change this value here to make the menu go 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>

<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);
}

</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.

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

< News >

Get awesome new designs right in your inbox!

No spam, not more than one weekly email.

< Support me>

Support my work by buying Elementor Pro , or addons, through my links

< Recent Designs >

Visit the Learning Center For More Designs !

Created by <Elementor Codes>

Leave a Reply

Your email address will not be published. Required fields are marked *