Creating a visually appealing and functional header menu is essential for any website, and with Elementor, you can take your design to the next level by adding animations that enhance user experience. In this step-by-step guide, we’ll walk you through how to create an animated header menu in Elementor, complete with transitions, hover effects, and custom CSS.
Step 1: Access Elementor Theme Builder
First, open your Elementor editor and navigate to the Theme Builder:
- In your WordPress dashboard, go to Templates and select Theme Builder.
- From the left-hand side, click on the Header option to create a new header template.
Step 2: Add a Container for the Header
Now that you’re in the Theme Builder, it’s time to start building your header:
- Click the + sign to add a new container.
- Choose a Flexbox Container with a column direction.
- Set the Content Width to Full Width and the Min Height to 115px.
Step 3: Add and Style Your Logo
Let’s add your logo to the header:
- Drag an Image widget from the left panel and drop it into the container.
- Choose your logo image.
- In the Style tab, set the Height to 35px and leave the Width as Auto for automatic adjustment.
- Link your logo to your homepage by adding a Custom URL or selecting the Site URL.
Step 4: Create the Menu Button
Next, we’ll add a stylish menu button:
- Add another Container widget below the logo.
- Open the Navigator to easily select elements.
- Drag a Button widget into this container.
- Customize the button:
- Set the Text to “Menu”.
- In the Style tab, choose a Typography like Inter, set the Font Size to 18px, and change the Text Color to Black.
- Set the Background Color to a light green.
Step 5: Position and Align the Button
To ensure your button is perfectly positioned:
- Select the parent container of the button.
- Set its Content Width to Full Width and adjust the Min Height to 45px.
- In the Advanced tab, remove any padding.
- Change the Position to Absolute and align it to the Right with 35px offset from both the top and the right.
- Set the Z-index to 20 for layering.
Step 6: Add Additional Containers for Menu Items
Now, let’s add containers that will hold the menu items:
- Add another Container widget below the button container.
- Set the Content Width to Full Width and the Min Height to 480px.
- In the Advanced tab, set the Position to Absolute with 10px offset from the right and top. Set the Z-index to 10.
- Add a Background Overlay with the same light green color as the button.
Step 7: Insert and Style the Icon Lists
Next, we’ll add icon lists for your menu:
- Search for the Icon List widget and drag it into the new container.
- Add your menu items (e.g., “Projects”) and choose appropriate icons.
- Set the Icon Color to black and the Text Color to jet black.
- Adjust the Typography settings to match the rest of the header.
Repeat this process to add another icon list for social media links or other menu items.
Step 8: Fine-Tune Layout and Spacing
To ensure everything is spaced correctly:
- Select the top container that holds the icon lists.
- Adjust the Top Margin to 113px and set padding as needed (e.g., 25px right, 50px bottom and left).
- Set the Gap between elements to 0 for a clean look.
Step 9: Add CSS Classes for Customization
For advanced styling, add CSS classes:
- Go to the Advanced tab of each widget or container.
- Add specific CSS classes:
- For the top container:
mdw-site-menu-area - For the logo:
mdw-site-on-scroll - For the button container:
mdw-site-menu-button - For the social icons:
mdw-site-menu-social
<style>
.mdw-side-menu-area{
--hide-on-scroll: true;
--hide-on-scroll-amount: 100;
--menu-icon-width: 48px;
--menu-icon-gap: 15px;
}
.mdw-side-menu-area .mdw-hide-on-scroll{
transition: all 0.3s ease-in-out;
}
.mdw-side-menu-area .mdw-hide-on-scroll.hide{
opacity: 0;
pointer-events: none;
}
.mdw-side-menu-area .mdw-side-menu-button{
cursor: pointer;
height: var(--min-height,45px);
overflow: hidden !important;
}
.mdw-side-menu-area .mdw-side-menu-button .elementor-widget-button{
transition: all 0.5s cubic-bezier(0.76, 0, 0.24, 1);
}
.mdw-side-menu-area.open .mdw-side-menu-button .elementor-widget-button{
transform: translateY(-100%);
}
.mdw-side-menu-area .mdw-side-menu-button .elementor-button{
height: var(--min-height,45px);
display: flex;
align-items: center;
justify-content: center;
}
.mdw-side-menu-area .mdw-side-menu-button .elementor-button-icon{
margin: 0;
}
.mdw-side-menu-area .mdw-side-menu-button .elementor-button-content-wrapper{
perspective: 6em;
}
.mdw-side-menu-area .mdw-side-menu-button .elementor-button-text:nth-child(1){
transform-origin: top;
transition: transform .55s cubic-bezier(.645,.045,.355,1), opacity .35s linear .2s;
}
.mdw-side-menu-area .mdw-side-menu-button .elementor-widget-button.open .elementor-button-text:nth-child(1){
opacity: 0;
transform: rotateX(90deg) scaleX(.9) translate3d(0, -10px, 0);
}
.mdw-side-menu-area .mdw-side-menu-button .elementor-button-text:nth-child(2){
position: absolute;
opacity: 0;
transform: rotateX(-90deg) scaleX(.9) translate3d(0, 10px, 0);
transform-origin: bottom;
transition: transform .55s cubic-bezier(.645,.045,.355,1), opacity .35s linear .2s;
}
.mdw-side-menu-area .mdw-side-menu-button .elementor-widget-button.open .elementor-button-text:nth-child(2){
opacity: 1;
transform: rotateX(0deg) scaleX(1) translateZ(0);
transition: transform .75s cubic-bezier(.645,.045,.355,1), opacity .35s linear .3s;
}
.mdw-side-menu-area:not(.open-arrow) .mdw-side-menu{
pointer-events: none;
}
.mdw-side-menu-area .mdw-side-menu:before{
top: 0;
right: 0;
left: unset;
transition: all 0.75s cubic-bezier(.76,0,.24,1);
}
.mdw-side-menu-area:not(.open) .mdw-side-menu:before{
height: var(--button-height,45px);
width: var(--button-width,110px);
transform: translate(calc(-1*var(--button-right,25px)), var(--button-top,25px));
}
.mdw-side-menu-area:not(.anim) .mdw-side-menu:before{
transition: none;
opacity: 0;
}
.mdw-side-menu-area .mdw-side-menu .e-con::-webkit-scrollbar,
.mdw-side-menu-area .mdw-side-menu .e-container::-webkit-scrollbar{
display: none;
}
.mdw-side-menu-area .mdw-side-menu .e-con,
.mdw-side-menu-area .mdw-side-menu .e-container{
overflow-y: auto;
max-height: calc(100vh - 20px - var(--margin-block-start,113px));
-ms-overflow-style: none;
scrollbar-width: none;
}
.mdw-side-menu-area .mdw-side-menu .elementor-icon-list-item,
.mdw-side-menu-area .mdw-side-menu .elementor-icon-list-item a{
perspective: calc(3*48px);
perspective-origin: bottom;
}
.mdw-side-menu-area .mdw-side-menu .elementor-icon-list-item{
margin-top: 0 !important;
padding-top: var(--padding-top);
}
.mdw-side-menu-area .mdw-side-menu .elementor-icon-list-item:first-child{
padding-top: 0;
}
.mdw-side-menu-area .mdw-side-menu .elementor-icon-list-item a{
outline: none;
}
.mdw-side-menu-area .mdw-side-menu .elementor-icon-list-icon{
width: var(--menu-icon-width,48px);
height: calc(0.6*var(--menu-icon-width,48px));
align-items: center;
padding-right: var(--menu-icon-gap,15px);
overflow: hidden;
opacity: 0;
box-sizing: content-box;
}
.mdw-side-menu-area.open-arrow .mdw-side-menu .elementor-icon-list-icon{
opacity: 1;
transition: all 0s cubic-bezier(.215,.61,.355,1) calc(var(--index,0) * .1s + 0.55s);
}
.mdw-side-menu-area .mdw-side-menu .elementor-icon-list-icon i{
width: 100% !important;
height: 0.1em;
background: currentColor;
position: relative;
margin-left: calc(0px - var(--menu-icon-width,48px) - var(--menu-icon-gap,15px));
transition: all .65s cubic-bezier(.215,.61,.355,1) !important;
}
.mdw-side-menu-area .mdw-side-menu .elementor-icon-list-icon svg{
display: none;
}
.mdw-side-menu-area .mdw-side-menu .elementor-icon-list-item:hover .elementor-icon-list-icon i{
margin-left: -0.07em;
}
.mdw-side-menu-area .mdw-side-menu .elementor-icon-list-icon i:before,
.mdw-side-menu-area .mdw-side-menu .elementor-icon-list-icon i:after{
content: "";
position: absolute;
width: 40%;
transform: rotate(45deg) translateX(0.05em);
transform-origin: right center;
height: 0.1em;
background: currentColor;
right: 0;
}
.mdw-side-menu-area .mdw-side-menu .elementor-icon-list-icon i:after{
transform: rotate(-45deg) translateX(0.05em);
}
.mdw-side-menu-area .mdw-side-menu .elementor-icon-list-text{
transform: rotateX(90deg) translate3d(0,60px,0);
opacity: 0;
transition: transform 0s linear .45s, opacity 0.3s linear !important;
transform-origin: center bottom;
padding-left: 0 !important;
max-width: calc(100% - var(--menu-icon-width,48px) - var(--menu-icon-gap,15px));
}
.mdw-side-menu-area .mdw-side-menu .elementor-icon-list-icon + .elementor-icon-list-text{
margin-left: calc(0px - var(--menu-icon-width,48px) - var(--menu-icon-gap,15px));
}
.mdw-side-menu-area .mdw-side-menu .elementor-icon-list-item:hover .elementor-icon-list-text{
margin-left: 0;
}
.mdw-side-menu-area.open-instant .mdw-side-menu .elementor-icon-list-text{
transform: rotateX(0deg);
opacity: 1;
transition: transform .65s cubic-bezier(.215,.61,.355,1) calc(var(--index,0) * .1s + .55s), opacity .35s linear calc(var(--index,0) * .1s + .55s), margin-left .65s cubic-bezier(.215,.61,.355,1) !important;
}
.mdw-side-menu-area .mdw-side-menu-social{
display: block;
background: none;
}
.mdw-side-menu-area .mdw-side-menu-social .elementor-widget-empty-icon{
display: none;
}
.mdw-side-menu-area .mdw-side-menu-social .elementor-icon-list-item{
width: 47%;
float: left;
}
.mdw-side-menu-area .mdw-side-menu-social a{
display: inline-block;
width: auto;
}
.mdw-side-menu-area .mdw-side-menu-social .elementor-icon-list-text{
transform: translate3d(0,100%,0);
transition: transform 0s linear .45s, opacity 0.3s linear;
max-width: 100%;
}
.mdw-side-menu-area.open-instant .mdw-side-menu-social .elementor-icon-list-text{
transition: opacity .45s linear 0s, transform .65s cubic-bezier(.215,.61,.355,1) 0s !important;
transition-delay: calc(var(--index)*.1s + .7s) !important;
}
.mdw-side-menu-area .mdw-side-menu-social .elementor-icon-list-text:after{
content: "";
height: 1px;
width: 100%;
position: absolute;
bottom: 0;
left: 0;
background: currentColor;
transform: scaleX(0%);
transform-origin: left;
transition: all 0.75s cubic-bezier(.645,.045,.355,1);
}
.mdw-side-menu-area .mdw-side-menu-social .elementor-icon-list-item:hover .elementor-icon-list-text:after{
transform: scaleX(100%);
}
@media (max-width:767px){
.mdw-side-menu-area{
--menu-icon-width: 38px;
--menu-icon-gap: 10px;
}
.mdw-side-menu-area .mdw-side-menu-social .elementor-icon-list-item {
width: 50%;
}
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
if(!MDWNonce108){
var MDWNonce108 = true
var $ = jQuery
$(document).ready(function(){
function getCSS(el, property){
return getComputedStyle(el.get(0)).getPropertyValue(property)
}
function setCSS(el, property, value){
el.each(function(i){
el.get(i).style.setProperty(property, value)
})
}
function setSmallState($this){
var button = $this.find('.mdw-side-menu-button'),
mainMenu = $this.find('.mdw-side-menu'),
buttonRight = (parseFloat(getCSS(button, 'right')) - parseFloat(getCSS(mainMenu, 'right'))) + 'px',
buttonTop = (parseFloat(getCSS(button, 'top')) - parseFloat(getCSS(mainMenu, 'top'))) + 'px',
buttonHeight = button.height(),
buttonWidth = button.width()
setCSS($this, '--button-right', buttonRight)
setCSS($this, '--button-top', buttonTop)
setCSS($this, '--button-height', buttonHeight + 'px')
setCSS($this, '--button-width', buttonWidth + 'px')
$this.find('.mdw-side-menu .elementor-widget-icon-list').each(function(i){
var paddingBottom = getCSS($(this).find('.elementor-icon-list-item').eq(0), 'padding-bottom')
setCSS($(this).find('.elementor-icon-list-item'), '--padding-top', paddingBottom)
})
}
$(window).on('load resize', function(){
$('.mdw-side-menu-area').each(function(){
setSmallState($(this))
})
})
$('.mdw-side-menu-area').each(function(){
var $this = $(this)
setSmallState($this)
setTimeout(function(){
$this.addClass('anim')
},100)
$(this).find('.mdw-side-menu .elementor-icon-list-item').each(function(i){
setCSS($(this), '--index', i)
var icon = $(this).find('.elementor-icon-list-icon')
if(icon.length && !icon.find('i').length){
icon.append('<i aria-hidden="true" class="fas fa-arrow-right"></i>')
}
})
})
$('.mdw-side-menu-button .elementor-widget-button').each(function(){
var wrapper = $(this).find('.elementor-button-content-wrapper'),
text = $(this).find('.elementor-button-text')
text.clone().appendTo(wrapper)
})
var clickLock = false
$('.mdw-side-menu-button').on('click', function(){
if(clickLock) return
var $this = $(this),
menu = $this.closest('.mdw-side-menu-area'),
button = $this.find('.elementor-widget-button')
clickLock = true
if(menu.hasClass('open')){
button.eq(1).removeClass('open')
menu.removeClass('open-arrow')
setTimeout(function(){ menu.removeClass('open-instant') },300)
setTimeout(function(){ menu.removeClass('open') },500)
setTimeout(function(){ button.eq(0).removeClass('open') },750)
}else{
button.eq(0).addClass('open')
setTimeout(function(){ menu.addClass('open open-instant open-arrow') },500)
setTimeout(function(){ button.eq(1).addClass('open') },750)
}
setTimeout(function(){ clickLock = false },750)
})
$('.mdw-side-menu-button a').on('click', function(e){
e.preventDefault()
})
$('body').on('click', function(e){
$('.mdw-side-menu-area').each(function(){
if($(this).hasClass('open-instant') && !$(e.target).closest('.mdw-side-menu').length && !$(e.target).closest('.mdw-side-menu-button').length){
$(this).find('.mdw-side-menu-button').trigger('click')
}
})
})
$(window).on('scroll', function(){
$('.mdw-hide-on-scroll').each(function(){
var offset = isNaN(parseFloat(getCSS($(this), '--hide-on-scroll-amount'))) ? parseFloat(getCSS($(this), '--hide-on-scroll-amount')) : 100
if(getCSS($(this), '--hide-on-scroll').trim() == 'true'){
if($(window).scrollTop() > offset){
$(this).addClass('hide')
}else{
$(this).removeClass('hide')
}
}
})
})
})
}
</script>These classes will help you apply custom styles and ensure consistency.
Step 10: Duplicate and Style the Close Button
To create a close button for your menu:
- Duplicate the existing menu button.
- Change the Text to “Close” and update the Background Color to black.
- Adjust the Text Color to light green to maintain visual consistency.
Step 11: Add Custom Code for Smooth Animations
To make the header animation work smoothly, you’ll need to add custom code:
- Go back to your WordPress dashboard and navigate to Elementor > Custom Code.
- Click Add New Custom Code and name it “Animated Site Menu”.
- Paste the custom code (provided in the video or tutorial) and publish it across the entire site.
Step 12: Preview and Finalize the Header
Now that everything is set up, it’s time to preview your work:
- Save your header template.
- Apply it to a test page to see how it looks in action.
- Ensure the animations are smooth and all elements are aligned properly.
Conclusion
Creating an animated header menu in Elementor may seem challenging, but with these step-by-step instructions, you can easily add a professional touch to your website. This tutorial shows you how to leverage Elementor’s powerful features and custom code to create a dynamic, responsive header menu.
