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)

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 *

Related Article

Slick Slider in Oxygen Builder
10 Example Slick Sliders in Oxygen Builder & How To Make Them
How to create a slider with Slick Slider in Oxygen Builder contains the stages of creation, the options and 10 sample sliders of the results.
How to Set a Website Always Use HTTPS (SSL)
In this article you will read how to set .htaccess so that the website always uses HTTPS (SSL) when opened by visitors.
Creating animated off canvas menus and hamburger buttons in Oxygen Builder
Tutorial on creating animated menu canvas and hamburger buttons in Oxygen Builder
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