fbpx

Create an off canvas menu with elementor

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on email

Do you want to create an off canvas menu? In fact, one of my clients wanted to create this slide-in menu for one of his projects.

I did create that menu but it was built with a different theme and plugin, so I wanted to check if I can create this off canvas menu with elementor alone.

Let’s find out together

The topics we will cover – how to create a menu in elementor, create a custom header in elementor, trigger a popup with a button click.

First, we will create a menu with Icons for this we will use Fontawesome icons because elementor already uses fontawesome and we don’t need to use any additional plugins.

Once we add the icons the second step is to create the off canvas menu for this we will use the popup feature of elementor pro.  We need to adjust some basic settings like the width, entrance and exit animation, etc.

Once done then we will add our menu to the popup using the elementor nav menu widget then will adjust some of the menu settings.

Then the third step is to create the button which will trigger this popup, for this, we will create a custom header and add the trigger button to it.

Once we put together these parts finally we need to add some custom css to polish up our menu.

Here is the css

.elementor-nav-menu a {
	flex-wrap: wrap;
	justify-content: center;
}
.elementor-nav-menu a > i {
	width: 100%;
	font-size: 32px;
	text-align: center;
}
.elementor-nav-menu .sub-arrow {
	position: absolute;
	right: 5px;
	top: 50%;
	transform: rotate(-90deg);
	padding: 0;
}
.sub-menu.elementor-nav-menu--dropdown {
	box-shadow: 0 0px 0px 1px rgba(0,0,0,.06), 0 1px 1px rgba(0,0,0,.08), inset 10px -20px 20px -10px rgba(0,0,0,0.08);
	background: #fff;
	height: 100vh !important;
	position: fixed !important;
	top: 0 !important;
	left: 100px !important;
	margin: 0 !important;
	overflow-y: auto;
}

Disclosure: Some of the links here are referral/affiliate links that means if you decide to buy through those links I’ll earn a commission at no extra cost to you. This is how I keep Designtheway.com up and running.

Plugins required:

You may also like

Ananda Projapati

Ananda Projapati

A freelance Wordpress consultant and educator.

Recent Posts

free wordpress training

2 thoughts on “Create an off canvas menu with elementor”

  1. Very interesting post on Create an off-canvas menu with elementor. here I learn some points that I don’t know before. I really appreciate the way you have written and explained. Good work..!!!

Leave a Comment

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to Top
website design illustration

Learn The Exact Steps I Follow To Create WordPress Websites

Easily create WordPress websites for yourself and others following my 2 hrs FREE WordPress Training (Video).