Menu
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
Make that section sticky at the top
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.
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
See this article for the examples to choose your preferred icon.
Learn
Animated Icons! Change the Elementor Hamburger Menu Icon
Give some life to that boring icon! Get an awesome animated hamburger menu 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>
<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>
