How to Create an Off-Canvas Menu with Oxygen Builder

This article explains how to create an off-canvas menu on a website using the WordPress CMS and the Oxygen Builder plugin
1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Updated: 10 August 2021
favico digitalizer

Hi Digital Buddy! There is a menu design that is currently sometimes used on several websites, both on desktop and mobile devices, namely the off-canvas menu .

In this article, we will create an example tutorial for creating an off-canvas menu using the WordPress CMS and the Oxygen Builder plugin.


The background of writing this tutorial is because there is a member of the Oxygen Builder Facebook Groups who asked about how to make an off-canvas menu the way he wants with a design referring to another website.

Then we tried to make it as an example that Oxygen Builder (without addons) can also be used in creating such a canvas menu even though it is not 100% similar, but the person said that the sample we made was what he wanted and asked how it was made.

Also read: Oxygen Builder, the Best WordPress Page Builder Plugin?

We have personally discussed and provided some brief instructions on how to create a canvas menu, but apart from that we also want to share more details to the public about how to create it through this article because we feel that there is a lot of knowledge that we can learn from the group and it makes we thought about sharing this little knowledge with others.

Overview of the Off-Canvas Menu

The off-canvas menu is a menu design that appears when we click on an element and usually appears with a slide effect because that's considered off-canvas.

The advantage of the off-canvas menu is that we can save space from the existing screen because it only takes 1 small element as a trigger to bring up a larger component and can contain many other elements including menu elements.

Our website also uses an off-canvas menu πŸ˜€

Sample Design

Note: The designs we reference are from another website ( ). We use it as an example for the purposes of this tutorial.

For this tutorial, the design that we will reference and have previously created is like the video below:


There are a number of notes that need your attention in the video tutorials that we made, including:

  1. The menu outside the canvas created using elements "Modal"
  2. Shear effect on the capital created using effects Slide Right on Animated On Scroll
  3. This tutorial is just a simple example to get an idea of ​​the steps to take.
  4. The search form is customized with code block elements , we took the idea and part of the code from the video tutorial "How To Make A Search Icon With Animated Field Reveal In Oxygen"


// empty HTML elements from "Hello World"
<!-- -->


/* remove border on input search */
#s {border:none;}

/* remove the border when we click input search */
#s:focus {outline:none;}

/* remove the submit button on search (GO button) */
.oxy-search-form input[type="submit"] {display:none;}

/* make the cursor on the search icon a pointer (clickable) */
#searchicon {cursor: pointer;} 


// replace the submit button function with an icon that has a searchicon id

jQuery('#searchicon').on('click', function() {



Video Tutorial How To Create Off-Canvas Menu


And that is tutorial on how to create an off-canvas menu with WordPress using the Oxygen Builder plugin.

However, what we have created is just a very simple example that needs to be modified according to your needs, for example, you can add a social media icon, shopping cart, contact form or other elements.

Anyway, from this tutorial we can see that the Oxygen Builder plugin is one of the most flexible builder plugins, without additional plugins or other addons, we can create an off-canvas menu.

We believe that creating this off-canvas menu when coupled with original ideas, creativity, imagination and good design, can be something very interesting and functional for visitors.

What do you think? Is it difficult to manually create an off-canvas menu like this? Maybe you prefer to use off-canvas menu ready plugins or other techniques? Please provide your opinion below.

Happy Digitize Your Life!

Do you need freelancers to design, build, develop a website or convert from an old website design to WordPress with Oxygen Builder?
Request a Quote

Leave a Reply

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

Latest Article

How to Apply Headroom.js on WordPress and Oxygen Builder
This article explains how to use Headroom.js in WordPress and Oxygen Builder, but you can also apply it to any website.
Create Sticky Header and Shrink Logo in 3 Step with Oxygen Builder
This article contains a tutorial for those who use Oxygen Builder to make sticky headers and logo images shrink.
How To Create Dynamic Slider with Flickity in Oxygen Builder Repeater?
This tutorial explain how to create dynamic slider using flickity combining with Oxygen Builder Repeater element.
Flickity on WordPress & Oxygen Builder
This article explains how to create sliders & carousels with flickity on WordPress & Oxygen Builder or any other website.
Convert Website to Oxygen Builder (Case Study)
Do you want to convert a website using Oxygen Builder? This article are examples of cases and performance improvements from the optimization results.
Oxygen Builder, the Best WordPress Page Builder Plugin?
This article contains an introduction to Oxygen Builder as a page builder plugin in WordPress.
5 Image Formats for Website Optimization
This article contains an introduction to several image formats that are commonly used on websites so that we can choose the most optimal one.
Digitalizer offers website design & development services for company profiles, online shops, event organizers, educational institutions or other fields. You don't need to think about domains, web hosting / servers, DNS, email, design, development, security and other technical issues. Just prepare your website content, we do the rest.
All website design & development packages include 1 year maintenance!
Free Consultation
Back to top
logo digitalizer - en
© 2011 - 2022 Digitalizer My ID