🌟 SEO for WordPress Course Pre-Sale Is Live 🌟
New Course!
Lytbox Academy Logo

Slide Out Mobile Menus for Elementor Without a Plugin

Article Outline

Mobile Menus for ElementorMobile menus are super important for websites but, unfortunately, have been very basic in the default Elementor Nav Menu widget. There have…

Check out the live example 👉 https://tuts.lytboxacademy.com/slide-out-mobile-menus-for-elementor-with-no-plugin-or-pop-ups/

Mobile Menus for Elementor
Mobile menus are super important for websites but, unfortunately, have been very basic in the default Elementor Nav Menu widget. There have been other options for creating mobile menus, like using popups, but popups aren’t the best for SEO.

Another option is to use an Elementor add-on. Almost all add-on plugins come with an off-canvas widget.

There is an alternative option of creating our own slide-out menus using custom HTML and CSS, which is not too difficult for those comfortable with a little code.

Slide Out Menus for Elementor

In this tutorial, I’ll take you step by step to create your slide-out mobile menu with just HTML and CSS. No plugins are required. There’s also a video at the end of this post to help follow along.

Designing a Mobile Menu

Before adding the code below, we first need to design and build our mobile menus. Start by creating a Section Template. This is going to be your menu.

Make your menu full width and full height, and style it up as you like. I do go more into this in my video tutorial so make sure to check that out.

I like to add either the Nav Menu widget or the Icons List widget in my mobile menus, and I suggest sticking with those. For better SEO results and if your menu has drop-down sub-items, then it’s best to use the Nav Menu width.

Once your template is completed, you’re good to go to the next step.

Building Custom Slide Out Menu for Elementor Without a Plugin

Step 1: Adding the HTML

In the header, add an HTML widget and make sure it’s aligned to the left.

There are 2 different HTML snippets below. One is for using the Nav Menu widget in your mobile menu template. The other is for using the Icons List widget in your Mobile Menu Template. These are are to make sure you’re making your mobile menu SEO friendly.

HTML for Nav Menu Widgets

<!- for using the Nav Menu widget in the mobile menu ->
<input type="checkbox" id="nav-control" class="lytbox-nav_control">
<label for="nav-control" class="lytbox-button">
    <div class="hamburguer">
        <span></span>
        <span></span>
        <span></span>
    </div>
</label>




<div class="lytbox-navigation">

[elementor-template id="118"]

</div>

HTML for Icon List Widgets

<!- for using the Icon List widget in the mobile menu ->
<input type="checkbox" id="nav-control" class="lytbox-nav_control">
<label for="nav-control" class="lytbox-button">
    <div class="hamburguer">
        <span></span>
        <span></span>
        <span></span>
    </div>
</label>




<nav class="lytbox-navigation">

[elementor-template id="118"]

</nav>

Step 2: Editing the HTML

The only thing that needs to be edited in your HTML is the Elementor Template ID shortcode.

Find the shortcake to you section template and replace the shortcode with it in the HTML snippet.

Step 3: Add the CSS

Copy and paste the CSS snippet below:

/* edit the hamburger and close icon colors here */

.lytbox-button {
	--hamburger-color: #000;
	--close-x-color: #fff;
	display: block;
	height: 18px;
	cursor: pointer;
	position: relative;
	z-index: 101;
}


/* must add in elementor template ID number to make the menu full width */
.elementor-265 {
	width: 100%;
}




/* end editing */

.lytbox-navigation {
	position: fixed;
	top: 0;
	left: 0;
	transform: translateX(100%);
	overflow: hidden;
	transition: transform 0.2s;
	width: 100%;
	height: 100vh;
	z-index: 100;
}

.lytbox-navigation {
	display: flex;
	justify-content: center;
	align-items: center;
}




/* toggle hamburger*/

.lytbox-button .hamburguer {
	position: relative;
}

.lytbox-button .hamburguer span{
	display: block;
	height: 2px;
	width: 24px;
	background: var(--hamburger-color);
	transform-origin: 50% 50%;
	transition: all 0.1s 0.2s ease, transform 0.2s ease;
}

.lytbox-button .hamburguer span:nth-child(2) {
	transform: translate(0, 6px);
}

.lytbox-button .hamburguer span:nth-child(3) {
	transform: translate(0, 12px);
		
}

.lytbox-nav_control {
	position: absolute;
	left: -9999px;
	width: 100%;
	clip: rect(0, 0, 0, 0);
}

.lytbox-nav_control:checked~.lytbox-navigation {
	transform: translateX(0);
	opacity: 1;
	transition: transform 0.3s, opacity 0.3s;
}

.lytbox-nav_control:checked~.lytbox-button .hamburguer {
	transition: all 0.1s 0s ease;
}





/* closed X */

.lytbox-nav_control:checked~.lytbox-button .hamburguer span {
	background: var(--close-x-color);
	transition: all 0.1s ease, transform 0.1s 0.2s ease;
}

.lytbox-nav_control:checked~.lytbox-button .hamburguer span:first-child {
	opacity: 0;
}

.lytbox-nav_control:checked~.lytbox-button  .hamburguer span:nth-child(2) {
	transform: translate(0, 6px) rotate(45deg);
}

.lytbox-nav_control:checked~.lytbox-button .hamburguer span:nth-child(3) {
	transform: translate(0, 4px) rotate(-45deg);

}

At the top of the CSS snippet, there are 3 areas to edit.

  • The Hamburger color – replace the color code with your own menu icon color
  • The Close X color – replace the color code with the color you’d like for your close button
  • The Elementor ID number (elementor-265) – replace with the number in your template shortcode. This is to make sure your slide-out menu is full-width.

Step 4: Adjust Your Header

You’ll need to make all the usual adjustments, such as hiding your desktop header and fixing the spacing around your HTML widget.

Using an Off Canvas Widget in an Elementor Addon

If, for some reason, this method is not working for you, it could be due to the theme’s code. I’ve built this with Hello Theme, other themes may require adjusting the CSS.

And if you’re not comfortable with HTML and CSS, the next option I would suggest is going with an Off-Canvas widget. Here are my recommended Elementor add-ons that have the Off Canvas:

  1. Hamburger Menu Icon – Elementor Widget | Crocoblock
  2. Dynamic Content for Elementor

If you’d like to follow along, check out the video I made here. I go more into detail, and we look at how to design and dope mobile menu.

YouTube video

Join the Lytbox Newsletter

Blog Page Sign Up

15 comments

  • Hey Jed,

    1) I followed and used the code in my website where the menu was placed on the right side (not left), how can I fix the animation which is left to right when the menu is tapped?

    2) How can I make the menu close by taping to the website area since, not just by depending on the close button?

    Appreciate the tutorial!

    1
    • Hey Abri,

      It would be very helpful if you could share a link to your website and a loom video explaining the issue. That way I can clearly understand what problem you are facing and help you with it.

      Cheers💪

      0
  • Hi everybody,

    Thanks for the tutorial, it’s very good!

    However, I am using an “On-site nav menu” with anchor links.
    And when I click on a “page” the slide in menu stays open, and I need to close it manually to see the content on the page.

    Is there a way to close out the menu after “link clicking” by some additional coding?

    Thanks in advance!

    1
  • hi
    i did everything according to tutorial but when i click on the hamburger icon, only a text comes out that says “[elementor-template id=”1697″]”

    1
    • Hi Amir,

      Please do check if you copied the code exactly, and the template id just like Jeff did on the video. We have the link to a working example of this at the start of the post.

      If you still continue facing the issue, please do send us a video showing it so we can help you 🙂

      0
      • A
        TheJediNinja

        Hey Amir, if you’re still getting this error, can you share a Loom video and a link to the site? We can take a quick look for you.

        0
  • With the change in Elementor subscriptions announced 14th November 2023 I am still uncertain if popups will be available in the new Elementor Essentials subscription. So this mobile menu solution using just HTML and CSS could be an alternative to avoid adding another plugin. It works fine with Elementor Version 3.17.3 and Hello theme.
    Your advice too on keeping the CSS in a single place (e.g. Hello Theme Additional CSS or Code Snippetts, https://www.youtube.com/watch?v=U6txSmJXCcs&pp=ygUZamVmZnJleSBseXRib3ggY3VzdG9tIGNzcw%3D%3D) will also overcome the limitation of no Custom CSS in Elementor Essentials.
    Thank you!!!

    1
    • A
      TheJediNinja

      Thanks a great point about keeping the CSS in one place and out of Elementor’s builder. Users with the current single license won’t be affected but new users buying the single site license can still use this as an alternative to the popup builder. I’ll have e to think of more workarounds for future tuts 😉

      0
  • Hello Jeffrey,

    I like this one for seo reasons. With the WCAG accessibility comming is it also possible to close the slide with the escape button?

    Wkr Tim

    1
    • I was looking into getting th Escape button to work too. Just paste this at the bottom of Jeffrey’s HTML

      jQuery(document).keydown(function(e) {
      if (e.keyCode === 27) {
      jQuery(“#nav-control”).prop(‘checked’, false);
      }
      });

      3
    • A
      TheJediNinja

      I’ll look into this and make an update to the code snippet soon.

      0

Leave your comment

Join the Lytbox Newsletter
Blog Page Sign Up
Lytbox Academy Logo

Reset your passord

Want to login? Click here.
Lytbox Academy Logo

Log in to your account

Forgot your password? Reset here.