In this quick tutorial we wanted to discuss how to set up a full screen menu overlay for Oxygen Builder. If you're using the default menu element in Oxygen, typically the mobile responsive version of your menu will display as an overlay on the phone. 

Sometimes, it makes sense to have a full screen menu overlay on a desktop device. This allows you to display your menu links, but you can also set up dynamic elements such as recent blog posts, call to actions, and more depending on your needs. 

With Oxygen, this is fairly simple and easy to do. (Please note: This article has been updated with the best method in 2021, and with a video tutorial. The old method, still valid, can be found under the new method)

How To Add A Fullscreen Overlay Menu To Oxygen - 2021 Method

To add our overlay menu, we're going to be using the native Oxygen Builder modal, the lovely hamburgers.css library, and some custom Javascript. Everything in this tutorial is made to be copy/paste, so you don't need to be a coding wizard 🧙‍♂️.

First, credit where credit is due. This code was directly inspired by the work of Matija Ljevar of mood.works. The implementation can be found on https://wereturncarbon.com/home/. We now use this method on all of our projects that require full screen overlay menus, though the code is originally from Matija.

🚨🚨Before you continue, if you find this helpful, consider subscribing to the channel. We're trying to hit 1000 subscribers, and only publish helpful content related to Oxygen and WordPress. Subscribe Now.

With that said, let's get into the written tutorial.

Step 1: The Hamburger Button

First up, we need to toggle our overlay menu. To do that, we want a nifty button that will both open AND close our modal. We also want it to change after being clicked. If you take a look at most sites with this type of menu, the button is 3 bars (☰), and when clicked, becomes an X. The X remains in the same position (as it's the same button), and when clicked, it closes the menu and transforms back to ☰.

There are several ways to set something like this up, but our favorite way is by using hamburgers.css, which does this using pure CSS. It's easy to implement, modify, and understand. Here are a couple of examples.

First, we need to include the CSS stylesheet. For development, you can include it via a link element (we use Advanced Scripts), but on production, it's best to only include the css relevant to the animation style you're using (exclude unused css) and include the used css on a global/universal stylesheet.

Next, we need to actually include the hamburger icon in our site. This is done by using a code block. Follow the documentation of Hamburgers.css to understand the code behind the toggle. We've included it using the following html structure:

On a production site, this code block would probably be in the upper right corner of a section or header builder element, on a catchall header/footer template.

With the CSS library, you can change the animation by changing hamburger--squeeze to any of the other options (there are 30+). Some are:

hamburger--elastic, hamburger--minus, hamburger--vortex

To ensure that the toggle remains above the modal, give a z-index of 1401 to the div that surrounds the code block. The modal z-index is 1400 so this ensures that the visitor can close the menu once opened.

The final part of this step is changing the ID of the code block to something memorable. In our example, we've changed it to iso-menu-toggle. This is optional.

Step 2: The Modal Addition

Now, we're going to add our modal, which we will use to build the menu. Add it into the catchall template, and set the following:

Modal trigger: when user clicks element, #open-modal

Width and height: 100vw, 100vh

Modal close: All functionality set to no. We only want the js function OxyCloseModal() to work.

Step 3: The Menu Creation

Now we have the modal as our menu canvas, we need to build the actual menu. There are a few ways to do this. The first is to embed the oxygen menu element and use that to pull a "fullscreen" menu that you've created in the WordPress backend. This is good if you need the owner of the site to be able to make quick changes to the menu, but you're a bit restricted when it comes to styling.

On the other end of the spectrum, you can create the entire menu by using text elements, link wrappers and various structural components. This offers you the most styling freedom, and is great if you’re the person who will be managing the site. But it doesn’t use the built in menu manager in WordPress, so to make changes, you’ll need to do that directly from the template.

A more advanced method would be using PHP to insert your menu via a code block, and styling via css. This allows you to use the WordPress menu feature, while styling as you want. For example, you can split the menu in to two columns, you can add unique hover effects, etc… This is what we typically do, so users can make changes from the WordPress Admin.

More info on registering and inserting WP Nav menus.

We also recommend making use of the Oxygen Builder animation library to include unique entrance movements when the menu is toggled. For more info watch the associated video tutorial.

Once you've built the actual menu, now it's time to set up the system that connects your hamburgers.css toggle to the modal opening and closing feature.

Step 4: The Open/Close System (JS Code here)

This is going to need some custom javascript and the addition of a hidden button, but it's relatively easy to understand.

Add this JavaScript to the catchall template. It can be included in the code block used to insert your Hamburger HTML, via a .js file, or any other method. Up to you, we're including it in the JS section of the single code block.

This code does the following:

• When you click on the hamburger icon, it as the Active class, which toggles the animation and makes it a X.
• When you click this icon it will also click a button (with the id #open-menu), which will open the modal (if it's closed).
• If the modal is open and the hamburger icon is an X, the same code will toggle the Oxygen JS function to close the modal.
• When make that click the X reverts back to the hamburger. And the cycle continues.

There are two things to note in this code:

• #iso-menu-toggle - This is the ID of the code block that contains the HTML that makes up the menu toggle (and this JS)
• #open-modal - The ID of the button that we're about the make, and the ID of the element that is set to trigger the modal opening.

So now, we have the code in place. The final thing to do is make the hidden modal button. This is what we're going to use to open the the modal menu. Because there's no documented way to open the modal with JS, this is the best alternative. But, because we're using the hamburger to open and close, as well as offer a visual (X/☰), we want the click on that hamburger to open/close.

So, when the visitor clicks on the toggle, that in turn clicks the button, which opens our menu.

Add the button anywhere in the page (in this case, we added it to a DIV which also contained the code block. This div would be placed in the right of our nav bar), and change the ID to #open-modal. Then, simply hide the button.

And....

You're done. Enjoy your new fullscreen menu!

Accessibility & SEO (and other considerations)

When building your menu, consider accessibility and SEO. Hamburgers.css has a couple of accessibility tips to follow. Be sure to use the correct aria labels, place everything inside the <nav> and make it able to be opened and closed via keyboard shortcuts. We do not add this in the tutorial. Read more about this here.

The one final thing to consider is that - when your modal opens, the page will still be scrollable. That means that if the visitor scrolls down the page, the content behind the modal will move. If your toggle is statically positioned, it'll move. Not terrible, but not ideal.

You may also be able to make it have a fixed position on modal open and revert back to static/relative when closed, but this would need some more JS and I'm not sure how responsive it would be.

The best workaround here is having a fixed/sticky header that remains in place on scroll. Then just add a margin to the content in the menu, so the fixed header plays into the design. You can see an example of that here:

Another Way To Add An Overlay Menu To Oxygen

To do this, we need to be using a catchall header and footer template. This is standard when we create websites, where we have a header section, inner content section, and then a footer section. This template is applied to all pages using a catchall filter (though you can specify where exactly you want different variations of headers to show by using different filters). 

Typically, you would simply add a menu or a pro menu element at this point. You can even set up a megamenu, and we created a tutorial on how to do that here. 

If you want something even more though, doing a full screen menu overlay may be your best bet. 

To set this up, we're simply going to use a modal element, meaning that there's no third party code or components needed to make this possible. 

First, let's set up our header. This header element will simply contain our logo on the left, and a menu toggle on the right. This menu toggle can be incredibly simple to incredibly complex.  

In this example, we are simply going to use the text “menu”. this is done by adding a normal text element to the menu, labeling it, and then adding custom CSS that makes it non selectable, and changes the cursor to a pointer when hovering over it.  

cursor:pointer 
user-select: none; Code language: CSS (css)

We then also give it a custom class like “.menutoggle”. 

However, you could use CSS or JavaScript to create a unique animation when clicking or hovering. Many websites utilize the hamburger icon, but when clicking on it the three lines that make it up merged together. If you need some inspiration and code for your menu toggle, here's a cool CodePen: 

After our menu toggle is complete, we are going to set up our modal. It needs to be full screen, hover over all other content, and be easy to close. 

To do this, we add a modal element, set it to be 100 VH tall, 100 VW wide and absolutely positioned above all other content. In this example, there will be no scrolling from within the modal, but you can set that up by following this tutorial. 

Our first step after creating the general modal is connecting it to our menu toggle. When somebody clicks on the menu toggle, the full screen overlay menu needs to show. 

This is done by going to trigger, and setting it to display when user clicks an element. Then, simply add the custom CSS class that you gave to the menu toggle into the field. In our case it would be “.menutoggle”. 

When the user clicks on the menu hamburger element, the full screen overlay menu will display in your Oxygen Builder website. By default, it just fades in, but you can add many unique modal display effects (gooey transitions are cool). 

The overall background of the modal will be the background of our overlay menu. In this example, we are simply going to use an individual color, but you can add a video background, image, or more. Think of it as just adding another section to your page, there's a lot that you can do here. 

Also, keep in mind that this overlay menu will end up loading on all pages. Be mindful with the design and the elements that you use in it, as it will impact your pages loading time. 

Once the underlying modal is set up, you have several options on how to proceed. The simplest overlay menu simply displays the links of your major pages. Typically, this is done vertically, but you can also do it horizontally. You can choose to add standard text and wrap it in a link wrapper. 

This is typically how we do it, and we add unique hover effects. Typically, the text is at 80% opacity until somebody hovers over it. It then becomes 100%, and we also add a strikethrough. This shows that the user is hovering over the proper link. 

As soon as they click on the link, they are redirected to the new page. There's no need to set up any function that closes the menu when clicking on a link, though you can do this if need be. 

You can add any standard Oxygen component to this menu. Examples could include using easy posts to display your most recent blog posts, static call to actions to your sales pages, a contact form, or more. 

The final thing to think about is how users will close your overlay menu. By default, clicking the escape key will close a modal, and we keep this functionality for our menu. However, we also want to set up our own custom closed button that is highly visible. 

This is done by adding a string of text, or a button. Typically, it says close and is located in the left or right hand upper corner. To set it to close the menu, give it the custom class of “.oxy-modal-close". 

Conclusion 

This is a simple way to add a full screen overlay menu to the Oxygen Builder, with no code and no third party plugins. If you have any questions about how to implement this on your own site, feel free to reach out in the comments below. If you have any tutorial requests, let us know as well!